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.
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:
|
1 2 3 4 5 6 7 8 9 |
//Creating new array elements for (var i = 0; i < 5; i++) { dynarray.push(j); j = j + 10; } |
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:
See online demo and code
Notice this piece of code in the demo:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
//Adding new array elements with return value var returnvalue = dynarray.push(10,15); //Displaying the dynamic array in a Div element for (num=0; num < returnvalue; num++){ afterArray += dynarray[num] + "<BR>"; } |
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:
See online demo and code
This is how the array was created and displayed initially:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
var dynarray = [1,2,3]; var i; var j= 10; // Used to give values to array elements var num; var initialArray = "The array elements initially <BR><BR>"; for (num=0; num < dynarray.length; num++){ initialArray += dynarray[num] + "<BR>"; } initialArray += "Array length initially: " + dynarray.length; document.getElementById("arr_before").innerHTML = initialArray; |
The following JS function is executed each time the button is clicked, that adds new elements by push method:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
function addelement(){ var add_element = document.getElementById("arr_index").value; var afterArray = "The array after using push with user selected value<BR><BR>"; //Adding new array elements with return value var returnvalue = dynarray.push(add_element); //Displaying the dynamic array in a Div element for (num=0; num < returnvalue; num++){ afterArray += dynarray[num] + "<BR>"; } afterArray += "New length of array: " + dynarray.length; document.getElementById("arr_after").innerHTML = afterArray; } |
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:
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:
|
1 2 3 4 5 6 7 8 9 |
//Creating new array elements for (var i = 0; i < 5; i++) { dynarray.unshift(j); j = j + 10; } |
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.