JavaScript Arrays
In JavaScript, an array is an ordered list of values. Each value, known as an element, is assigned
a numeric position in the array called its index. The indexing starts at 0, so the first element is at
position 0, the second at position 1, and so on.
Arrays can hold any type of data-such as numbers, strings, objects, or even other arrays—making
them a flexible and essential part of JavaScript programming.
1. Create Array using Literal
Creating an array using array literal involves using square brackets [] to define and initialize the
array.
// Creating an Empty Array
let a = [];
[Link](a);
// Creating an Array and Initializing with Values
let b = [10, 20, 30];
[Link](b);
Output
[]
[ 10, 20, 30 ]
2. Create using new Keyword (Constructor)
The "Array Constructor" refers to a method of creating arrays by invoking the Array
constructor function.
// Creating and Initializing an array with values
let a = new Array(10, 20, 30);
[Link](a);
Output
[ 10, 20, 30 ]
Note: Both the above methods do exactly the same. Use the array literal method for efficiency,
readability, and speed.
Basic Operations on JavaScript Arrays
1. Accessing Elements of an Array
Any element in the array can be accessed using the index number. The index in the arrays starts
with 0.
// Creating an Array and Initializing with Values
let a = ["HTML", "CSS", "JS"];
// Accessing Array Elements
[Link](a[0]);
[Link](a[1]);
Output
HTML
CSS
2. Accessing the First Element of an Array
The array indexing starts from 0, so we can access first element of array using the index number.
// Creating an Array and Initializing with Values
let a = ["HTML", "CSS", "JS"];
// Accessing First Array Elements
let fst = a[0];
[Link]("First Item: ", fst);
Output
First Item: HTML
3. Accessing the Last Element of an Array
We can access the last array element using [[Link] - 1] index number.
// Creating an Array and Initializing with Values
let a = ["HTML", "CSS", "JS"];
// Accessing Last Array Elements
let lst = a[[Link] - 1];
[Link]("First Item: ", lst);
Output
First Item: JS
4. Modifying the Array Elements
Elements in an array can be modified by assigning a new value to their corresponding index.
// Creating an Array and Initializing with Values
let a = ["HTML", "CSS", "JS"];
[Link](a);
a[1]= "Bootstrap";
[Link](a);
Output
[ 'HTML', 'CSS', 'JS' ]
[ 'HTML', 'Bootstrap', 'JS' ]
5. Adding Elements to the Array
Elements can be added to the array using methods like push() and unshift().
The push() method add the element to the end of the array.
The unshift() method add the element to the starting of the array.
// Creating an Array and Initializing with Values
let a = ["HTML", "CSS", "JS"];
// Add Element to the end of Array
[Link]("[Link]");
// Add Element to the beginning
[Link]("Web Development");
[Link](a);
Output
[ 'Web Development', 'HTML', 'CSS', 'JS', '[Link]' ]
6. Removing Elements from an Array
To remove the elements from an array we have different methods like pop(), shift(), or splice().
The pop() method removes an element from the last index of the array.
The shift() method removes the element from the first index of the array.
The splice() method removes or replaces the element from the array.
// Creating an Array and Initializing with Values
let a = ["HTML", "CSS", "JS"];
[Link]("Original Array: " + a);
// Removes and returns the last element
let lst = [Link]();
[Link]("After Removing the last: " + a);
// Removes and returns the first element
let fst = [Link]();
[Link]("After Removing the First: " + a);
// Removes 2 elements starting from index 1
[Link](1, 2);
[Link]("After Removing 2 elements starting from index 1: " + a);
Output
Original Array: HTML,CSS,JS
After Removing the last: HTML,CSS
After Removing the First: CSS
After Removing 2 elements starting from index 1: CSS
7. Array Length
We can get the length of the array using the array length property.
// Creating an Array and Initializing with Values
let a = ["HTML", "CSS", "JS"];
let len = [Link];
[Link]("Array Length: " + len);
Output
Array Length: 3
8. Increase and Decrease the Array Length
We can increase and decrease the array length using the JavaScript length property.
// Creating an Array and Initializing with Values
let a = ["HTML", "CSS", "JS"]
// Increase the array length to 7
[Link] = 7;
[Link]("After Increasing Length: ", a);
// Decrease the array length to 2
[Link] = 2;
[Link]("After Decreasing Length: ", a)
Output
After Increasing Length: [ 'HTML', 'CSS', 'JS', <4 empty items> ]
After Decreasing Length: [ 'HTML', 'CSS' ]
9. Iterating Through Array Elements
We can iterate array and access array elements using for loop and forEach loop.
Example: It is an example of for loop.
// Creating an Array and Initializing with Values
let a = ["HTML", "CSS", "JS"];
// Iterating through for loop
for (let i = 0; i < [Link]; i++) {
[Link](a[i])
Output
HTML
CSS
JS
Example: It is the example of [Link]() loop.
// Creating an Array and Initializing with Values
let a = ["HTML", "CSS", "JS"];
// Iterating through forEach loop
[Link](function myfunc(x) {
[Link](x);
});
Output
HTML
CSS
JS
10. Array Concatenation
Combine two or more arrays using the concat() method. It returns new array containing joined
arrays elements.
// Creating an Array and Initializing with Values
let a = ["HTML", "CSS", "JS", "React"];
let b = ["[Link]", "[Link]"];
// Concatenate both arrays
let concateArray = [Link](b);
[Link]("Concatenated Array: ", concateArray);
Output
Concatenated Array: [ 'HTML', 'CSS', 'JS', 'React', '[Link]', '[Link]' ]