DEV Community

Amitav Mishra
Amitav Mishra

Posted on • Originally published at jscurious.com

6 Ways 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 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
Enter fullscreen mode Exit fullscreen mode

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"]
Enter fullscreen mode Exit fullscreen mode

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']
Enter fullscreen mode Exit fullscreen mode

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

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

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

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

The splice() method

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

  • The first parameter of splice() takes an array index where you want to add or remove item.
  • The second parameter takes 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 as blank. We can add as many values as we want.
const language = ['Java', 'PHP'];

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

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"]
Enter fullscreen mode Exit fullscreen mode

Passing value as parameter

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

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

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

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 spread operator.

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

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

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

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]
Enter fullscreen mode Exit fullscreen mode

If we leave some of the indexes in the middle and assign values to 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]
Enter fullscreen mode Exit fullscreen mode

So we have discussed 6 different ways to append items to an array. You can use any of the 6 methods to add an item to array.

You May Also Like

Thanks for you time
Find more web development blogs on jscurious.com

Top comments (1)

Collapse
 
mzaini30 profile image
Zen

I usually using spread operator based on its flexibility.