How to add items to an Array in JavaScript

There are various ways to add or append an item to an array. We will make use of push, unshift, splice, concat, spread and index to add items to an array. Let’s discuss all the 6 different methods one by one in brief.

The push() method

This method is used to add elements to the end of an array. This method returns the new array length.

const movies = ['Avengers', 'Iron-man', 'Thor'];

const newLength = movies.push('Hulk'); 

console.log(movies); // ['Avengers', 'Iron-man', 'Thor', 'Hulk'];

console.log(newLength); //4

We can also add multiple values with push() method.

const movies = ['Iron-man', 'Thor'];

movies.push('Avengers', 'Deadpool', 'Hulk');

console.log(movies); // ["Iron-man", "Thor", "Avengers", "Deadpool", "Hulk"]

The unshift() method

The unshift() method is used to add elements at the beginning of an array. This method returns the new array length.

const cars = ['Audi', 'BMW', 'Jaguar'];

const newLength = cars.unshift('Mercedes'); 

console.log(newLength ); // 4

console.log(cars); // ['Mercedes', 'Audi', 'BMW', 'Jaguar']

We can also add multiple values with unshift() method.

const cars = ['Audi', 'Jaguar'];

cars.unshift('Mercedes', 'Tesla'); 

console.log(cars); // ['Mercedes', 'Tesla', 'Audi', 'Jaguar']

The splice() method

This method can both add and remove items at a specified index of an array.

The first parameter of splice() takes an array index where you want to add or remove an item.
The second parameter takes the number of elements to be removed from the specified index. If not removing any item then this can be 0.
The third parameter takes items to be added at the specified index. If we are only removing then this can be left blank. We can add as many values as we want.

const language = ['Java', 'PHP'];

language.splice(1, 0, 'Android', 'Swift'); 
//['Java', 'Android', 'Swift' , 'PHP']

The concat() method

The concat() method is used to merge two or more arrays and returns a new array containing the merged values. This method does not change the existing arrays.

Passing array as parameter

const marvel = ['Avengers', 'Thor'];

const DC = ['Batman', 'Joker'];

const movies = marvel.concat(DC);

console.log(movies);  // ["Avengers", "Thor", "Batman", "Joker"]

Passing value as parameter

const marvel = ['Avengers', 'Thor'];

const movies = marvel.concat('Batman', 'Joker');

console.log(movies);  // ["Avengers", "Thor", "Batman", "Joker"]

The spread(…) operator

The spread operator(...) is used to expand and spread array elements. We can spread and merge an array with new values using the spread operator.

const animals = ['Tiger', 'Horse'];

const zoo = [...animals, 'Elephant', 'Lion', 'Deer']

console.log(zoo);  // ['Tiger', 'Horse', 'Elephant', 'Lion', 'Deer']

Adding element with index

We can add a new value to the array by accessing the particular index and assign the new element.

const number = [15, 40];

number[2] = 65;

number[3] = 80;

console.log(number); //  [15, 40, 65, 80]

If we leave some of the indexes in the middle and assign values to the array, then the left out places in the middle will be filled with undefined values.

const number = [15, 40];

number[3] = 65;

number[6] = 80;

console.log(number); //  [15, 40, undefined, 65, undefined, undefined, 80]

5 ways to remove items from an array

Amitav Mishra

JS Curious