Array is a variable where we can store more than one value. JavaScript arrays can store any valid value, including strings, numbers, objects, functions, and even other arrays.
var myArray = [element0, element1, ..., elementN]
var fruits = ["Apple", "Banana", "Mango", "Orange", "Papaya"];
Array elements can be accessed by their index using the square bracket notation. Array indexes are zero-based. This means that the first item of an array is stored at index 0 and goes up to index n-1(where n is number of elements in an array).
var fruits = ["Apple", "Banana", "Mango", "Orange", "Papaya"];
console.log(fruits[0]); // Prints: Apple
console.log(fruits[1]); // Prints: Banana
The length property returns the length of an array, which is the total number of elements contained in the array.
var fruits = ["Apple", "Banana", "Mango", "Orange", "Papaya"];
console.log(fruits.length); // Prints: 5
To add a new element at the end of an array, use the push()
method.
var colors = ["Red", "Green", "Blue"];
colors.push("Yellow");
console.log(colors); // Prints: Red,Green,Blue,Yellow
To add a new element at the beginning of an array, use the unshift()
method.
var colors = ["Red", "Green", "Blue"];
colors.unshift("Yellow");
console.log(colors); // Prints: Yellow,Red,Green,Blue
To remove the last element from an array, use the pop()
method.
var colors = ["Red", "Green", "Blue"];
colors.pop();
console.log(colors); // Prints: ["Red", "Green"]
To remove the first element from an array use the shift()
method.
var colors = ["Red", "Green", "Blue"];
colors.shift();
console.log(colors); // Prints: ["Green", "Blue"]
To add or remove elements from any index, use the splice()
method. The splice()
method returns array of deleted elements.The original array will be modified.
arr.splice(startIndex, deleteCount, "elem1", ..., "elemN")
The first parameter (startIndex) defines the position where new elements should be added (spliced in).
The second parameter (deleteCount) defines how many elements should be removed.
The rest of the parameters (“elem1” ,…., “elemN”) define the new elements to be added.
var colors = ["Red", "Green", "Blue"];
// Deleting elements
colors.splice(0, 1);
console.log(colors); // Prints: ["Green", "Blue"]
//Adding elements at position one
colors.splice(1, 0, "Yellow", "Pink");
console.log(colors); // Prints: ["Green", "Yellow", "Pink", "Blue"]
//Insert two values, remove one
colors.splice(1, 1, "Purple", "Violet");
console.log(colors); // Prints: ["Green", "Purple", "Violet", "Pink", "Blue"]
To create a string by joining the elements of an array, use the toString()
method or join()
method. The join()
method takes an optional parameter which is a separator string that is added in between each element.
var colors = ["Red", "Green", "Blue"];
//Using toString() method
console.log(colors.toString()); // Prints: Red,Green,Blue
//Using join() method
console.log(colors.join()); // Prints: Red,Green,Blue
console.log(colors.join("")); // Prints: RedGreenBlue
console.log(colors.join("-")); // Prints: Red-Green-Blue
console.log(colors.join(", ")); // Prints: Red, Green, Blue
To extract a portion of an array, use slice()
method. The slice()
method returns an new array object selected from start to end. The original array will not be modified.
arr.slice(startIndex, endIndex)
var fruits = ["Apple", "Banana", "Mango", "Orange", "Papaya"];
var newArr = fruits.slice(1, 3);
console.log(newArr); // Prints: ["Banana", "Mango"]
The concat()
method can be used to merge or combine two or more arrays. This method does not change the existing arrays, instead it returns a new array.
var color1 = ["Red", "Green", "Blue"];
var color2 = ["White", "Orange"];
var colors = color1.concat(color2);
console.log(colors); // Prints: ["Red", "Green", "Blue", "White", "Orange"]