Array Push Method is the method that we use when we want to insert a value, object or another array into an array. This tutorial will teach you how to add a single element or multiple items to an existing array. You will also learn How to merge two arrays using the push method. It covers all the features of the array push method.
Table of Contents
Array Push Method
The array push method is a built-in JavaScript method that adds new elements to the end of an array. It takes the element to be added as an argument and returns the array’s new length. This method can push scalar values, objects, or another array to an array.
The syntax of the array push method
1 2 3 4 5 | push(element0) push(element0, element1) push(element0, element1, /* … ,*/ elementN) |
Parameters
Here element0, element1, …, elementN are the elements you want to add to the end of the array. You can provide any number of items separated by a comma.
Return Value
The push method returns the new length of the array.
Array push examples
Let us look at some of the examples of the array push method.
Adding an item to the Array
The code snippet that follows creates an array of numbers with four items. It then appends the number 4 to the end of the array using the push method.
1 2 3 4 5 6 | let numbers=[1,2,3,4] numbers.push(5) //pushing 5 to numbers array console.log(numbers) //[ 1, 2, 3, 4, 5 ] |
Adding multiple items to the Array
You can append multiple elements to the array by supplying multiple items separated by a comma to the push method.
1 2 3 4 5 6 | let numbers=[1,2,3,4] numbers.push(5,6,7) //pushing 5,6,7 to numbers array console.log(numbers) //[ 1, 2, 3, 4, 5, 6, 7 ] |
Merging Arrays using push method
The push method can also be used to merge two arrays. The code below merges the nums array with the numbers array.
Note that we are not creating a new array but taking the value from the nums array and appending it into the numbers array.
1 2 3 4 5 6 7 8 9 | let numbers=[1,2,3,4] let nums=[11,12,13,14] numbers.push(...nums) //pushing nums array to numbers array //or merging nums with numbers console.log(numbers) //[ 1, 2, 3, 4, 11, 12, 13, 14] |
The push method mutates the Array
The push method mutates the array. It does not return a new array but changes the length and content of the current array.
If you do not want to mutate the array (i.e., you want to return a new one instead of modifying the array), then you can use the concat method or the spread operator.
The following code uses the spread operator to push a new value to the array without modifying the original array.
1 2 3 4 5 6 | let numArr = [1, 2, 3]; let newArr = [...numArr, 4]; console.log(numArr); // Output: [1, 2, 3] console.log(newArr); // Output: [1, 2, 3,4] |
The following code uses the concat method to create a new array and push the value 4 into it.
1 2 3 4 5 6 | let numArr = [1, 2, 3]; let newArr = numArr.concat(4); console.log(numArr); // Output: [1, 2, 3] console.log(newArr); // Output: [1, 2, 3,4] |
Vs. Unshift
The push method is very similar to the unshift method. The difference between push & unshift is that the push method adds an element to the end of an array, while the unshift method adds an element to the front of an array.
The following code uses the unshift method to push a value into the array. Note that it will insert the value at the beginning of the array.
1 2 3 4 5 | let numArr = [1, 2, 3]; numArr.unshift(4) console.log(numArr); // Output: [ 4, 1, 2, 3 ] |
Summary
- The array push method appends an element (or elements) to the end of an Array.
- It returns the new length of the array.
- You can append a single item or multiple items or merge two or more arrays.
- The push method alters the original array. It changes its length and content.
