Array in JavaScript is a collection of elements, where the array elements can be of any type like – numbers, strings, objects, or even other arrays. The index of JavaScript Arrays starts from zero, which means the first element is accessed with an index of 0.
// Number Array
const arr = [10, 20, 30, 40, 50];
// String Array
const arr = ["Apple", "Banana", "Mango", "Orange"];
// Misc Array [Can contain any data types elements in array]
const arr = [10, "20", "Banana", Null]
Create an Array
There are different ways to create an array in JavaScript, but we will explain the most used approaches.
1. Using Array Literals [Most used Method]
The most common way to create an array is using the square brackets ([]).
const arr = [10, 20, 30, 40, 50];
console.log(arr);Note: Spaces and line breaks in array elements are not recommended.
We can also create an array like this
const arr = [];
arr[1] = 10;
arr[2] = 20;
arr[3] = 30;
console.log(arr);2. Using Array Constructor
The Array constructor is another way to create arrays in JavaScript.
const arr = new Array(10, 20, 30, 40, 50);
console.log(arr);We can also create an array like that
const arr = new Array(5);
arr[1] = 10;
arr[2] = 20;
arr[3] = 30;
arr[4] = 40;
arr[5] = 50;
console.log(arr);Traversing the Array Elements
Traversing an array means accessing each array element one by one. There are several ways to achieve this.
1. Using for Loop
The for loop is used to traverse each element of an array, and gives complete control to traverse the array.
let arr = [10, 20, 30, 40, 50];
for (let i = 0; i < arr.length; i++) {
console.log(arr[i]);
}2. Using for…of Loop
The for...of loop is a concise way to iterate over the values of an array.
let arr = [10, 20, 30, 40, 50];
for (let value of arr) {
console.log(value);
}3. Using forEach Loop
The forEach loop is a function for traversing the array.
let arr = [10, 20, 30, 40, 50];
arr.forEach((value, index) => {
console.log(`Index: ${index}, Value: ${value}`);
});Find the Length of an Array
The length property is used to find the length of an array.
let arr = [10, 20, 30, 40, 50];
let length = arr.length;
console.log(length);Accessing the Array Elements
Here are different scenarios to access the array elements.
1. Accessing the First Array Element
Since array indexing starts from 0, so the first array element is at index 0. We can use the index number to access the array element.
let arr = [10, 20, 30, 40, 50];
let first = arr[0];
console.log(first);2. Accessing the Last Array Element
Since array indexing starts from 0, so the last element of an array will be at index array.length - 1.
let arr = [10, 20, 30, 40, 50];
let last = arr[arr.length - 1];
console.log(last);3. Accessing the Array Element by using the Index Number
You can directly access the array element by index number. The array indexing starts from 0.
let arr = [10, 20, 30, 40, 50];
let secondElement = arr[1];
console.log(secondElement);Adding Array Elements
1. Adding Element to the Beginning of an Array
The unshift() method is used to add elements to the beginning of an array.
let arr = [20, 30, 40, 50];
arr.unshift(10);
console.log(arr);2. Adding Element to the End of an Array
The push() method is used to add elements to the end of an array.
let arr = [10, 20, 30, 40];
arr.push(50);
console.log(arr);3. Adding element at the Given Index
The splice() method is used to add elements at a specific index.
let arr = [10, 30, 40, 50];
arr.splice(1, 0, 20); // Inserts 20 at index 1
console.log(arr);Removing Array Elements
1. Removing Element from the Beginning of an Array
The shift() method is used to remove the first element of an array.
let arr = [10, 20, 30, 40, 50];
arr.shift(); // Removes the first element
console.log(arr);2. Removing Element from the End of an Array
The pop() method is used to remove the last element of an array.
let arr = [10, 20, 30, 40, 50];
arr.pop(); // Removes the last element
console.log(arr);
3. Removing Element from Given Index
The splice() method is used to remove the elements from a specific index. Provide the starting index, and number of elements to remove.
let arr = [10, 20, 30, 40, 50];
arr.splice(1, 1); // Removes 1 element at index 1
console.log(arr);JavaScript Associative Array
In JavaScript, there is no concept of associative array like other programming languages. The objects and maps are commonly used as associative arrays because they allow to store key-value pairs.
Using Objects as Associative Arrays
An object can store data as key-value pairs, where keys are typically strings or symbols.
let obj = {
name: "Akash",
age: 30,
occupation: "Software Developer"
};
// Accessing values
console.log(obj.name);
console.log(obj["age"]);
// Adding a key-value pair
obj.country = "India";
console.log(obj.country);
// Modifying a value
obj.age = 31;
console.log(obj.age);
// Deleting a key-value pair
delete obj.occupation;
console.log(obj.occupation);Using Maps as Associative Arrays
The Map is a built-in object in JavaScript designed for key-value pairs. Unlike objects, Map allows keys of any type (including objects, numbers, etc.).
let map = new Map();
// Adding key-value pairs
map.set("name", "Akash");
map.set("age", 30);
map.set("occupation", "Software Developer");
// Accessing values
console.log(map.get("name"));
// Checking if a key exists
console.log(map.has("age"));
// Deleting a key-value pair
map.delete("occupation");
console.log(map.has("occupation"));