In this tutorial, you will learn everything about JavaScript arrays [] with the help of examples.
💎JavaScript Array
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, objects, etc.
⚒️ Declaration of an Array
JavaScript provides you with two ways to declare an array.
Using Array constructor
Using array() constructor, define arrays.
See the following examples:
eg. | 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:
eg. | let arr = new Array(9,10,8,7,6);
Using [] notation
Using literal [] notation, define arrays.
See the following examples:
eg. | 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 create a num array:
eg. | let num = [4, 3, 2];
If you want to create an empty array by using square brackets.
See the following example:
eg. | let arr = [];
✅ An array with different types of elements
As we mentioned above, an array can hold different data types of elements in it.
See the following examples:
eg. | var arr = ["hello", 520, "test", 960, true];
✅ Access elements in an array
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:
eg. | var arr = ["hello", 520, "world"];
The below example shows, how to access the elements of the arr array.
1 | console.log(arr[0]); // 'hello'
2 | console.log(arr[1]); // 520
3 | console.log(arr[2]); // 'world'
To modify the value of an element in the array. You can assign a new value to the element with its index.
eg | arr[1] = 'my';
✅ Length of an array
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 a 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 example,
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 the array, you can access the last array element.
See the following examples:
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 the last element)].
✅ An array with JavaScript methods
When you can use typeof operator method with an array in javascript, it returns an object as shown in the following example:
let arr = ['hello', 'my', 'world'];
console.log(typeof arr); // object
To check if variable is array in 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
✅ Javascript Array Manipulation
If you want to add the elements to the beginning and end of an array OR to remove elements from the beginning and end of 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.
Thanks for reading 👍
Connect with me on Instagram - Abhishek Patil