In this tutorial, you will learn everything about JavaScript arrays [] with examples.
In JavaScript, an array is a variable and it can hold different data type elements in it. Different types of data mean, it may contain elements of different data types. An element data type can be numbers, strings, and objects, etc.
JavaScript provides you with two ways to declare an array.
Array
constructorUsing array() constructor, define arrays.
See the following examples:
let arr = new Array();
The arr
array is empty i.e. it holds no element.
To define an array with elements in js, you pass the elements as a comma-separated list in the Array()
constructor.
See the following example:
let arr = new Array(9,10,8,7,6);
[]
notationUsing literal []
notation, define arrays.
See the following examples:
let arr = [element1, element2, element3];
The array literal form uses the square brackets [] to wrap a comma-separated list of elements.
See the following example, to creates num
array:
let num = [4, 3, 2];
If you want to create an empty array by using square brackets.
See the following example:
let arr = [];
As we mentioned above, an array can hold different data types of elements in it.
See the following examples:
var arr = ["hello", 520, "test", 960, true];
You can easily access the elements of an array using their index position. An array index always starts with 0.
First, of defining an array with elements in javascript, you can see the following example:
var arr = ["hello", 520, "world"];
In this example shows, how to access the elements of the arr
array.
console.log(arr[0]); // 'hello'
console.log(arr[1]); // 520
console.log(arr[2]); // 'world'
To modify the value of an element in the array. You can assign a new value of the element with their index.
arr[1] = 'my';
Want to find the length of an array in js, use the length
property of it. It returns the length of an array.
See the following example:
var arr = ["hello", 520, "world"];
console.log(arr.length); // 3
The javascript array length
property is writable. It’s very good benefit to you. For what?, So you can add or remove elements in an array by changing the value of the length
property.
For examples,
Change the length
property of the arr
array to 5 to add one new element with an initial value of undefined
at the end of the array.
// add 1 element
var arr = ["hello", 520, "world"];
arr.length = 5;
console.log(arr[3]); // undefined
Likewise, To remove elements from an array in js, define the length
property of the arr
array to 3 to remove the last two elements of the array.
Then. to access the third element of the array, it returns undefined
.
// remove the last 3 elements
var arr = ["hello", 520, "world"];
arr.length = 3;
console.log(arr[3]); // undefined
Using the length
property of array, you can access the last array element.
See the following exmaples:<
var arr = ["hello", 520, "world"];
console.log(arr[arr.length - 1]); // 'world'
This array length property [arr.length – 1] return the last index of an array and this becomes arr[index(numeric position of last element)].
When you can use typeof
operator method with an array in javascript, it returns object
as shown in the following example:
let arr = ['hello', 'my', 'world'];
console.log(typeof arr); // object
Check if variable is array javascript, you use Array.isArray()
method.
See the following example:
console.log(Array.isArray(arr)); // true
Iterate array elements one by one in javascript using the for
loop.
See the following example:
let arr = ['hello', 'my', 'world'];
for (let i = 0; i < arr.length; i++) {
document.write('Element :- ' + arr[i] + '<br>');
}
//Element :- hello
//Element :- my
//Element :- world
If you want to add the elements of beginning and end from an array and remove elements of beginning and end from an array, you can use the following methods in js:<
push(...items)
adds items
to the end.pop()
removes the element from the end and returns it.shift()
removes the element from the beginning and returns it.unshift(...items)
adds items
to the beginning.splice
removes from a specific Array index.In this tutorial, you have learned about javascript arrays and it’s important methods. Which is used to manipulate javascript arrays.
☞ Learn Vue.js from scratch 2018
☞ Learn JavaScript - Become a Zero to Hero
☞ JavaScript Programming Tutorial Full Course for Beginners
☞ Vue js Tutorial Zero to Hero || Brief Overview about Vue.js || Learn VueJS 2023 || JS Framework