Hit enter after type your search item

JavaScript array push Vs unshift methods: Explained with 4 examples

The purpose of push and unshift methods in JavaScript

In certain scenarios, you need to add elements in existing arrays of JavaScript.  The push and unshift methods enables us to do that.

Both these methods, push and JS unshift allow to add new elements; then what is the difference? The only difference is the JavaScript push adds elements at the end of an existing array. Whereas the unshift method adds new elements at the beginning of the array.

Both methods return the length of the specified array, after adding new elements.

To further clearing the concept, see the following online examples.

An example of push method of JavaScript

To explain push JavaScript method, I have created an array of three elements initially. After that, the array push method is used to add five more elements in that array.

The array is displayed before and after executing the push method in the <div> tag of demo page.

JavaScript push

See online demo and code

Following is done in the demo:

First of all, an array is created with three elements: var dynarray = [1,2,3];

The array elements are displayed by using a for loop where length property is used in the condition part of the loop.

After that, the array push method is used to add new elements. The array push is used in another for loop with a variable that is incremented by 10 in each iteration. The current value of the variable is added as new element in that array:


 

Finally, another for loop is used to display the array with newly added elements. You can see, it displayed the initial as well as newly added elements in that div.

An example of using the return value of push method

As mentioned earlier, the array push method returns the length of an array after appending new elements. To demonstrate this, I am modifying the above example a bit where in the last loop I will use a variable that gets the returned value after using the push method. This variable is used in place of length property to specify the condition part of the for loop.

See the code and output online:

JavaScript array push

See online demo and code

Notice this piece of code in the demo:


 

A variable is defined and assigned it the return value of push method. The same variable is used in the for loop to set the condition which is the length of the array.

An example of using array push with user selected value

In this example, the array push method is executed each time as you click the button in the demo page. The new element value is taken from the HTML select dropdown (selected by the user) and assigned to a JS variable as you click the button.

After that, the array push method is used to append the new element to an existing array which is created with three elements initially. The array after adding the new element is shown in the div tag. See the example online:

JavaScript array push select

See online demo and code

This is how the array was created and displayed initially:


 

The following JS function is executed each time the button is clicked, that adds new elements by push method:


 

Adding array elements at user’s action can be quite useful for certain situations where you may use string arrays as well.

An example of using the unshift JavaScript method

In above examples, you saw the new elements were added at the last of existing array. If your scenario is to add new elements at the beginning of array then use the unshift method of JavaScript.  See the following example:

JavaScript array unshift

See online demo and code

This is just the copy of the first example of using push method where the push method is replaced by unshift method. However, you noticed the order of newly added elements?

The loop for adding new elements is ended at 50, which becomes the first array element in that array. While, the initial array elements became the last.

This is how the unshift method was used in the example:


 

As such, the unshift method also returns the length of an array after adding new elements. You may assign it to a variable to get array length and use it in place of array length property just like I shown it in the second example of push method.

This div height required for enabling the sticky sidebar