JavaScript Array Push Vs Unshift Methods

Demonstration of using push and unshift methods to modify JavaScript arrays.

Purpose of push and unshift methods in JavaScript

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

Both these methods, push and JS unshift allow to addition of new elements; then what is the difference?

  • The only difference is the JavaScript push method 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 clarify the methods working, see the following examples.

An example of push method of JavaScript

To explain the JavaScript push method, I have created an array of three elements initially.

After that, the array push method is used to add five more elements to that array.

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

JS Code with HTML and a little CSS:

<!doctype html>
<html>
<head>

<style>
#arr_before {
  background: #415665;
  height: auto;
  width:300px;
  border-radius: 15px;
  padding:20px;
  font-size:22px;
  color:#fff;   
}
#arr_after {
  background: #804040;
  height: 270px;
  width:300px;
  border-radius: 15px;
  padding:20px;
  font-size:22px;
  color:#fff;   
}

</style>
 
  
</head>
<body>
<div id="arr_before"></div>
<div id="arr_after"></div>

<script>
    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;
    
    
    
    var afterArray = "The array after using push method<BR><BR>";
    //Creating new array elements
    for (var i = 0; i < 5; i++) {
      dynarray.push(j);
      j = j + 10;
    }
    //Displaying the dynamic array in a Div element
    for (num=0; num < dynarray.length; num++){
     afterArray += dynarray[num] + "<BR>";
     }
     
    afterArray += "Array length after push method: " + dynarray.length;     
    document.getElementById("arr_after").innerHTML = afterArray;
    
</script> 
 
</body>
</html>

Output:

JavaScript push

The 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 the array 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 a new element in that array:
    //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 the length property to specify the condition part of the for loop.

See the code and output:

<body>
<div id="arr_before"></div>
<div id="arr_after"></div>

<script>
    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;
    
    
    
    var afterArray = "The array after using push method with returned value<BR><BR>";
    //Adding new array elements
    
    
    //Displaying the dynamic array in a Div element
    var returnvalue = dynarray.push(10,15);
    for (num=0; num < returnvalue; num++){
     afterArray += dynarray[num] + "<BR>";
     }
     
    afterArray += "Array length after push method: " + dynarray.length;     
    document.getElementById("arr_after").innerHTML = afterArray;
    
</script> 
 
</body>

Output:

JavaScript array push

Notice this piece of code:

//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 the 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 when you click the button (after running this code).
  • 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.

Complete code:

<!doctype html>
<html>
<head>

<style>
#arr_before {
  background: #415665;
  height: auto;
  width:300px;
  border-radius: 15px;
  padding:20px;
  font-size:22px;
  color:#fff;   
}
#arr_after {
  background: #804040;
  height: 270px;
  width:300px;
  border-radius: 15px;
  padding:20px;
  font-size:22px;
  color:#fff;   
}
.pcls{
  background: #804040;
  height: auto;
  width:300px;
  border-radius: 15px;
  padding:20px;
  font-size:18px;
  color:#fff;   
}
.btncls{
    background-color:#4B4FC5;
    border: #2e6da4;
  	font-family: Arial, Geneva, Arial, Helvetica,  sans-serif;
    font-size: 15px;
    color: #FFFFFF;
    letter-spacing: 1px;
    padding: 8px 12px;
    font-size: 14px;
    font-weight: normal;

    border-radius: 4px;
    line-height: 1.5;
    text-decoration:none;
} 
</style>
 
  
</head>
<body>
<p class="pcls"><label>Select an element to add in Array: </label><select id="arr_index">
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
</select></p>
<p><button class="btncls" onclick="addelement()">Add new element by push method</button></p>
<div id="arr_before"></div>
<div id="arr_after"></div>

<script>
    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;
    

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;

}
    
</script> 
 
</body>
</html>

Sample Output as I selected 6:

JavaScript array push select

This is how the array was created and displayed initially:

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, which adds new elements by the push method:

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 the user’s action can be quite useful for certain situations where you may use string arrays as well.

An example of using the JavaScript unshift method

In the above examples, you saw the new elements were added at the last of an existing array.

If your scenario is to add new elements at the beginning of the array then use the unshift method of JavaScript.

See the following example:

<!doctype html>
<html>
<head>

<style>
#arr_before {
  background: #415665;
  height: auto;
  width:300px;
  border-radius: 15px;
  padding:20px;
  font-size:22px;
  color:#fff;   
}
#arr_after {
  background: #804040;
  height: 270px;
  width:300px;
  border-radius: 15px;
  padding:20px;
  font-size:22px;
  color:#fff;   
}

</style>
 
  
</head>
<body>
<div id="arr_before"></div>
<div id="arr_after"></div>

<script>
    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;
    
    
    
    var afterArray = 'The array after using "unshift" method<BR><BR>';
    //Creating new array elements
    for (var i = 0; i < 5; i++) {
      dynarray.unshift(j);
      j = j + 10;
    }
    //Displaying the dynamic array in a Div element
    for (num=0; num < dynarray.length; num++){
     afterArray += dynarray[num] + "<BR>";
     }
     
    afterArray += "Array length after unshift method: " + dynarray.length;     
    document.getElementById("arr_after").innerHTML = afterArray;
    
</script> 
 
</body>
</html>

Output:

JavaScript array unshift

This is just a copy of the first example of using the push method where the push method is replaced by unshift method.

However, have you noticed the order of newly added elements?

The loop for adding new elements ends 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:

//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 the array length and use it in place of the array length property just like I shown in the second example of the push method.
Author - Atiq Zia

Atiq is the writer at jquery-az.com, an online tutorial website started in 2014. With a passion for coding and solutions, I navigate through various languages and frameworks. Follow along as we unravel the mysteries of coding together!