Arrays

Array

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.

Syntax
var myArray = [element0, element1, ..., elementN]
Example
var fruits = ["Apple", "Banana", "Mango", "Orange", "Papaya"];

Accessing the Elements of an Array

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).

Example
var fruits = ["Apple", "Banana", "Mango", "Orange", "Papaya"];
 
console.log(fruits[0]); // Prints: Apple
console.log(fruits[1]); // Prints: Banana

Getting the Length of an Array

The length property returns the length of an array, which is the total number of elements contained in the array.

Example
var fruits = ["Apple", "Banana", "Mango", "Orange", "Papaya"];
console.log(fruits.length); // Prints: 5

Adding New Elements to an Array

To add a new element at the end of an array, use the push() method.

Example
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.

Example
var colors = ["Red", "Green", "Blue"]; 
colors.unshift("Yellow");
console.log(colors); // Prints: Yellow,Red,Green,Blue

Removing Elements from an Array

To remove the last element from an array, use the pop() method.

Example
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.

Example
var colors = ["Red", "Green", "Blue"];
colors.shift();

console.log(colors); // Prints: ["Green", "Blue"]

Adding or Removing Elements at Any Position

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.

Syntax
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.

Example
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"]

Creating a String from an Array

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.

Example
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

Extracting a Portion of an Array

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.

Syntax
arr.slice(startIndex, endIndex)
Example
var fruits = ["Apple", "Banana", "Mango", "Orange", "Papaya"];
var newArr = fruits.slice(1, 3);

console.log(newArr); // Prints: ["Banana", "Mango"]

Merging Two or More Arrays

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.

Example
var color1 = ["Red", "Green", "Blue"];
var color2 = ["White", "Orange"];
var colors = color1.concat(color2);

console.log(colors); // Prints: ["Red", "Green", "Blue", "White", "Orange"]