Javascript Data Structure Stack and Queue: How does push/pop work faster than shift/unshift?

As we know objects allow us to store keyed collections of values. That's good and very beneficial. But what if we need an ordered collection, where we store the elements in the 1st, 2nd, 3rd, and so on position. So, for such a case it's not convenient to use the object here, because it does not provide any method to manage the order of the elements.

So, there exists a special data structure named Array, that stores ordered collections of any datatype.

For example:

const arr = ['Hello', 'Welcome', 404, true]

In this article we cover:

1. How the push and pop method works.
2. How do the shift and unshift methods work.
3. Method that works with the beginning of the array.
4. Method that works with the end of the array.
5. Methods push/pop run fast, while shift/unshift are slow But why?

Queue:

A queue is one of the most common data structures in a computer science field. A queue is an ordered collection of an element that supports two array methods:

• push( )
• shift ( )

Push( ):

The push ( ) method adds an element to the end of an array.

let players = ['Will', 'Rahul', 'Smith']
players.push('Babar');
console.log(players); // 'Will', 'Rahul', 'Smith', 'Babar'

shift( ):

The shift ( ) method gets an element from the beginning of an array, advancing the queue so that the 2nd element becomes the 1st element of an array.

let players = ['Will', 'Rahul', 'Smith', 'Babar']
players.shift( ); //remove 'Will'
console.log(players); // 'Rahul', 'Smith', 'Babar'

Stack:

A stack is a simple data structure in programming that allows you to add or remove an element from the top/end of an array. Stack also supports two operations:

• push( )
• pop( )

We have already discussed the push( ) method which adds an element to the end of an array. So, now we discussed the pop( ) method:

pop( ):

pop() method remove an element from the end of an array.

let players = ['Will', 'Rahul', 'Smith']
players.pop( ); //removed 'Smith'
console.log(players); // 'Will', 'Rahul','

Method that works with the end of the array:

push( ) and pop( ) methods are works with the end of the array. Because pop( ) removes an element from the last of the array and push( ) inserts a new element from the last of an array.

Methods that work with the beginning of the array:

shift( ) and unshift( ) methods are works with the beginning of the array. Because shift( ) removes an element from the beginning of the array and unshift( ) inserts a new element from the beginning of an array.

Methods push/pop run fast, while shift/unshift are slow. But Why?

Let’s see what happens during the execution of the shift() method: It’s not enough to take and remove the element from the beginning of an array. Other elements need to be renumbered as well.

The shift operation must do 3 things:

1. Remove the element with the index 0.
2. Move all elements to the left, renumber them from the index 1 to 0, from 2 to 1, and so on.
3. Update the length property.

The more elements in the array, the more time to move them.

A similar thing happens with unshift to add an element to the beginning of the array, we need first to move existing elements to the right, increasing their indexes.

And what’s with push/pop? They do not need to move anything. To extract an element from the end, the pop method cleans the index and shortens the length.

The actions for the pop operation:

The pop method does not need to move anything, because other elements keep their indexes. That’s why it’s blazingly fast. and a similar thing with the push method.

Summary:

• Array is a special data structure that stores ordered collection.
• There are four method array methods. In which two of them work with the beginning of the array and two work with the end of the array.
• push( ) and pop( ) methods are works with the end of the array.
• shift( ) and unshift( ) methods are works with the beginning of the array.
• push and pop work faster than shift and unshift.

If you got any questions or doubts, feel free to ping me on Twitter

I hope it was a great read for you. If you have any feedback please share it in the comment below.