Push, Pop, Shift or Unshift Methods in Javascript

Here, I am going to demonstrate to you the use of javascript push, pop, shift and unshift method.

The javascript push, pop, shift and unshift method is used whenever you want to append values to ending part of an array (push), remove value from the ending part of an array (pop), remove an item from beginning of an array (shift) or add item to beginning of an array (unshift).

Let us take for instance the following example
Example 1.0: Array of Cars Collection
<script>
var str="I love"
let cars = ['BMW', 'Camri', 'Venza','Volvo','Land Cruiser'];
</script>


If need arises l that we have to add more car names to the example 1.0, then we have to make use of the array push method. One important thing you must note here is, the push method relies on a length property to determine where to start inserting the given values. If the length property cannot be converted into a number, the index used is 0.

Now let us add Range Rover and Toyota to the cars array
Example 1.1: Demonstrating the Push Method
<script>
var str="I love "
let cars = ['BMW', 'Camri', 'Venza','Volvo','Land Cruiser'];
cars.push("Range Rover");
cars.push("Toyota");
//We have appended Range Rover and Toyota to the list of cars
//Let us display the results to see the push method action
for(i=0;i<cars.length;i++)
{
document.write("<br>" + str + cars[i]);
//Results
//I love BMW
//I love Camri
//I love Venza
//I love Volvo
//I love Land Cruiser
//I love Range Rover
//I love Toyota
}
</script>

You might also like JavaScript Array and Get array's list items using javascript


Now let us remove an item (Toyota) from the ending of the array
Example 1.2: Demonstrating the Pop Method
<script>
var str="I love "
let cars = ['BMW', 'Camri', 'Venza','Volvo','Land Cruiser'];
cars.pop("Toyota");
//We have removed Toyota from the list of cars
//Let us display the results to see the pop method action
for(i=0;i<cars.length;i++)
{
document.write("<br>" + str + cars[i]);
//Results
//I love BMW
//I love Camri
//I love Venza
//I love Volvo
//I love Land Cruiser
//I love Range Rover
}
</script>


Example 1.3: Demonstrating the Shift Method
<script>
var str="I love "
let cars = ['BMW', 'Camri', 'Venza','Volvo','Land Cruiser'];
cars.push("Range Rover");
cars.push("Toyota");
//We have removed BMW from the cars list
//Let us display the results to see the shift method action
for(i=0;i<cars.length;i++)
{
document.write("<br>" + str + cars[i]);
//Results
//I love Camri
//I love Venza
//I love Volvo
//I love Land Cruiser
//I love Range Rover
//I love Toyota
}
</script>

Just as we used the push method to add new items to ending part of the cars list, we can still use the unshift method to add new items to beginning of the array.
Example 1.4: Demonstrating the Unshift Method
<script>
var str="I love "
let cars = ['BMW', 'Camri', 'Venza','Volvo','Land Cruiser'];
cars.unshift("Range Rover");
cars.unshift("Toyota");
//We have appended Range Rover and Toyota to the  list of cars beginning
//Let us display the results to see the unshift method action
for(i=0;i<cars.length;i++)
{
document.write("<br>" + str + cars[i]);
//Results
//I love Range Rover
//I love Toyota
//I love BMW
//I love Camri
//I love Venza
//I love Volvo
//I love Land Cruiser
}
</script>

See Demo | Download File