JavaScript Add to Array Methods (Push vs Unshift vs Splice vs concat)

There are many ways to add new items to an array in JavaScript. In this tutorial, we will learn how to perform JavaScript add to array operation.

So let’s see how and when to use JavaScript methods to add single or multiple elements to an array in a single call.

Add Items to the End of an Array Using Array.push() method

The JavaScript push() method adds a new element to the end of an array and returns the same array with a new length. You can add single or multiple items to an existing array in a single push() method call.

If you want to add single or multiple items to the end of an array, the JavaScript push() method is the simplest way to do this.

push() Method Syntax

array.push(item1, item2, ...)

See the code below how you can add an element to the end of an array using the push() method.

Add Single Element To the End of an Array

const animals = ['cows', 'cats', 'dogs'];

animals.push('chickens'); // add a single item "chickens" to the array

console.log(animals);
// output: Array ["cows", "cats", "dogs", "chickens"] // new animal will be added at the end

Add Multiple Elements To the End of an Array

const animals = ['cows', 'cats', 'dogs'];

animals.push('chickens', 'ships', 'rabbit'); // add multiple items 'chickens','ships','rabbit' to the array

console.log(animals);
// output: Array ["cows", "cats", "dogs", "chickens", "ships", "rabbit"]

Add Items to the Start of an Array Using Array.unshift() method

If you want to add single or multiple items to the start of an array, the JavaScript unshift() method is the simple & quickest way to do this. The JavaScript unshift() method adds a new element to the start of an array and returns the new length array.

You can append single or multiple items to an existing array in a single unshift() method call.

unshift() Method Syntax

old_array.unshift(item1, item2, ...)

See the code below how JavaScript Array.unshift() method works.

Add Single Element To the Start of an Array

const animals = ['cows', 'cats', 'dogs'];
animals.unshift('chickens'); // append a single item "chickens" in start
console.log(animals);
// output: Array [ "chickens","cows", "cats", "dogs"] // new animal will be added at the start

Add Multiple Elements To the Start of an Array

const animals = ['cows', 'cats', 'dogs'];
animals.unshift('chickens', 'ships', 'rabbit'); // add a single animal "chickens" in start
console.log(animals);
// output: Array [ "chickens", "ships", "rabbit", "cows", "cats", "dogs"] // new animals will be added at the start

Using Splice() Method to add Item to the Middle of an Array

splice() method changes the original array by modifying the content of an array. This method modifies the content of an array by adding the new items or removing/replacing the existing item(s).

Splice() Method Syntax

array.splice(index, deleteCount, item1, item2, item3, ....)

Add Single Element in Middle Using Splice() Method

see the code below:

const skills = ['angular', 'nodejs', 'mongodb', 'react'];
skills.splice(2, 0, 'vue'); // at index position 2, remove 0 items, then add 'vue' to that position

console.log(skills)
["angular", "nodejs", "vue", "mongodb", "react"]

Add Multiple Elements in Middle Using Splice() Method

const skills = ['angular', 'nodejs', 'mongodb', 'react'];
skills.splice(2, 0, 'vue', 'express'); // at index position 2, remove 0 items, then add 'vue', 'express' to that position

console.log(skills)
["angular", "nodejs", "vue", "express", "mongodb", "react"]

We recommend you should first try to solve your problem using Javascript’s builtin push() or unshift() method because they are the best and simplest method to find the solution.

JavaScript Add to Array By Merging Two Array using Concat() Method

In JavaScript, the concat() method returns a new array by merging two or more arrays and the best thing is it does not change the existing arrays.

Concat() Method Syntax

const newArray = arrayOne.concat(arrayTwo, arrayThree, ...);

let’s assume you have two arrays that contain user’s skill and for some reason, you want to add or merge them together. Using concat() method you can solve this in a very simple way.

See the code below how you can do this in easy steps:

const skillsOne = ['Angular', 'React'];
const skillsTwo = ['Vue', 'NodeJs'];

const skills = skillsOne.concat(skillsTwo);

console.log(skills); // New array result ["Angular", "React", "Vue", "NodeJs"]
console.log(skillsOne); // this does not change and result is - ["Angular", "React"]
console.log(skillsTwo); // this does not change and result is - ["Vue", "NodeJs"]

Add Multiple Arrays to an Array in JavaScript

see the code below:

const skillsOne = ['Angular', 'React'];
const skillsTwo = ['Vue', 'NodeJs'];
const skillsThree = ['Express', 'PHP'];
const skillsFour = ['JavaScript', 'JQuery', 'Ajax'];

const skills = skillsOne.concat(skillsTwo, skillsThree, skillsFour); // Add multiple arrays into an array

console.log(skills); // New array result ["Angular", "React", "Vue", "NodeJs", "Express", "PHP", "JavaScript", "JQuery", "Ajax"]
console.log(skillsOne); // this does not change and result is - ["Angular", "React"]
console.log(skillsTwo); // this does not change and result is - ["Vue", "NodeJs"]
console.log(skillsThree); // this does not change and result is - ["Express", "PHP"]
console.log(skillsFour); // this does not change and result is - ["JavaScript", "JQuery", "Ajax"]

JavaScript Add Elements to an Array Using Index Notation

In JavaScript, you can also modify or change an array without using any JavaScript methods that we have talked about above. This method works well and can be very useful when you know at which place or which index of an array you want to place some element(s).

See the code below how you can do it:

Add Element(s) at some Index position

const skills = ['Angular', 'React'];
skills[2] = "Vue"; // add skill "Vue" to the index position of 2 in an array
skills[3] = "NodeJs";
console.log(skills)
// Output ["foo", "bar", "Vue", "NodeJs"]

Add Element(s) at the End of an Array

const skills = ['Angular', 'React'];
skills[skills.length] = "NodeJs"; // skills.length = 2, So Index position is 2, add skill "NodeJs" to the end of the array
console.log(skills)
// Output ["foo", "bar", "NodeJs"]

Conclusion about JavaScript Add to Array

As you can see in the above example, adding elements or an array is a simple task. We have covered the best possible way to do it. It all depends on you and your work requirement which approach is perfect to solve your problem.

Finally, add element(s) to an array in JavaScript is done. Feel free to ask any doubts in the comment section below.