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

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 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']

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

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

• 5 ways to remove items from an array
• 6 ways to find items in an Array in JavaScript
• Promises in JavaScript
• 20 JavaScript Shorthand Techniques that will save your time

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