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.
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.
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.
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
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"]
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.
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.
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
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
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).
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. |
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"]
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.
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.
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"]
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"]
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:
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"]
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"]
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.
Some times in our work, we need to cut a video in specific start &…
If you don't know about JavaScript filter() function then this tutorial is for you. In…
In this tutorial, we will learn how to install bower on windows 10. But, before…
JavaScript reduce() method tutorial is the topic, we are going to understand today. So what…
In this post, we will understand Angular HttpClient with example. When Angular version 4.3 launched,…
In this tutorial, we will know how to redirect domain according to a country IP…
This website uses cookies.