Stacks vs Queues with JavaScript
By: Chad Murobayashi
Tags: Software Engineering, Data Structures, JavaScript, Big O Notation, Programming

Stacks vs Queues with JavaScript

Part 3 of the Data Structures series with JavaScript

Photo by Iva Rajović on Unsplash

In this article, we will be taking a look at the difference between stacks and queues using JavaScript. Keep in mind, I will be using arrays to explain the differences. If you are interested in the most efficient method of creating stacks or queues, I would suggest creating a linked list. Check out my article below to learn more about building a singly linked list.

Stacks vs Queues

Stacks and Queues are data structures where you add and remove data. The difference between them is the order in which you remove data.

Think of a stack as a pile of books on a table. You can add a book to the top of the pile. When you remove a book, you take it from the top of the pile (which is the last book you added on top). This is the LIFO structure (Last In First Out).

Think of a queue as a queue or a line. If you are in a store waiting in line to purchase your items, a person can be added to the back of the line. When the cashier is ready, the person at the front of the line is the first person to be helped. This is the FIFO structure (First In First Out).

Where are Stacks and Queues used?

The most common use of a stack is in the call stack. You also see is when using undo/redo or routing. For example, if you push the back button in your browser, you are returning the last site that was added to the stack.

Queues are used anytime you need to wait in line. One common example is printing tasks. A printer can only print one page at a time, and the first page added to the queue is the first page printed.

Creating Stacks using Arrays

Creating a stack using an array is simple. We need to use the push and pop methods to add and remove values from the end of the stack. This follows the LIFO structure. In the example below I am creating a new array called stack, and pushing in three values (websites I have visited). To remove from the array, I will use the pop method to remove the last website that I added to the stack. In this case, we will be removing ‘youtube’.

let stack = []; stack.push('google');

stack.push('medium');

stack.push('youtube'); stack.pop();

Creating Queues using Arrays

Creating a queue using arrays is very similar to creating a stack. The only difference is that instead of using pop to remove values from the end of the queue, we will use shift to remove values from the beginning of the queue. This follows the FIFO structure. In the example below, we are creating a queue with three values, named first, second, and third. By using the shift method, we are removing ‘first’, which was the first value that was added to the queue.

let queue = []; queue.push('first');

queue.push('second');

queue.push('third'); queue.shift();

Big O Notation of Stacks and Queues

Stacks and queues are used for the insertion and removal of data. If you need to search or access data, we would typically use other data structures. In my explanations above, we used arrays to implement stacks and queues. When working with large amounts of data, arrays are not efficient for creating stacks and queues because arrays also create indexes for each value and attach many other methods. When adding or removing, you may need to re-index the entire array, which can lead to O(N) time complexity. A better way to create stacks and queues is using a linked list.

You can see the code below to see stacks and queues created using a linked list. This will assure O(1) time complexity for adding and removing data.

For stacks, the implementation of a singly linked list is the same, except we will be using the unshift and shift methods, and renaming them to push and pop. The reason we will use shift and unshift, rather than push and pop from a singly linked list is that pop is not constant time.

For queues, we will be adding to the end of the list using push, and removing from the beginning of the list using shift. Because it is a queue, we change the names of the methods from push to enqueue, and from shift to dequeue.