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, ...)
 array An array in which array(s) or elements to be pushed or merged.
 item1, item2, …  Multiple arrays or elements.

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, ...)
 old_array  An array in which array(s) or elements to be added.
 item1, item2, …  Multiple arrays or elements.

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, ....)
 index (Required) An integer value that specifies what position of the item to add or remove of an array. You can use a negative value to specifies the position from the end of an array.
deleteCount (Optional) An integer value that indicates how many items to be removed from an array from start. If the value is set to 0 or negative, no items will be removed.
 item1, item2, item3, …. (Optional) The items to add from the start of the array. If you do not specify any items, the splice() method only removes the items from the array.

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, ...);
newArray Returns a new array instance after concat the arrays without changing the existing arrays.
arrayOne An existing array in which array(s) to concatenate or merge.
arrayTwo, arrayThree, … Multiple existing arrays or values.

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.

One Response

  1. matrix snipen December 26, 2019

Leave a Reply