DEV Community

Cover image for Stack and Queue in JavaScript
Bek Brace
Bek Brace

Posted on

35

Stack and Queue in JavaScript

Hello everyone.
While I was preparing a short video for my channel about the difference between stack and queue, and if both exist in JavaScript or not; I thought why not writing an interesting article about it, and this in fact will help me as I will use this for my video script ... it's a win-win :)

If you're hearing the terms "Stack" and "queue" for the first time, don't be scared, I'll do my best to explain ... that

So, I am going to talk here specifically about my second favorite programming language ... you know which one ;)

So in JavaScript, the terms "stack" and "queue" typically refer to data structures which are strictly used to organize and manage collections of elements.

First, let's talk about the Stack: What is it ?
Dumb question! We have just said it's a data structure, what's more important to understand is: How does it work and why it is important ?

A stack is a Last In, First Out (LIFO) data structure, where the last element added to the stack is the first one to be removed.
If you have worked in accounting - like myself - I'm pretty sure you know what is FIFO, LIFO and weighted average!

If not: Think of it like a stack of plates: you can only take the top plate off the stack.

JavaScript's call stack operates in a stack-like manner. When a function is called, a new frame is pushed onto the call stack. When the function completes, its frame is popped off the stack.

Let me show you an example:

// Initially stack is declared as an empty array.
let stack = [];

// Pushing elements onto the stack.
stack.push(1);
stack.push(2);
stack.push(3);

// Popping elements from the stack.
console.log(stack.pop()); // Outputs 3
console.log(stack.pop()); // Outputs 2

Enter fullscreen mode Exit fullscreen mode

Now that you have got a little bit of an idea about what a stack is in JavaScript, let's see how different is it from a "Queue".

A queue is the total opposite of a stack !
Queue is a First In, First Out (FIFO) data structure, where the first element added to the queue is the first one to be removed. Think of it like a line of people waiting for a bus: the first person who joined the line is the first one to get on the bus.
{I hope my analogies (the plates and the bus) are clear in the context!}

It's important to know that JavaScript doesn't have a built-in queue data structure, but you can use an array to simulate a queue by using the shift() method to remove elements from the front and the push() method to add elements to the end.

Let me also show you a practical example on queue:

let queue = [];

// Enqueue elements
queue.push(1);
queue.push(2);
queue.push(3);

// Dequeue elements
console.log(queue.shift()); // Outputs 1
console.log(queue.shift()); // Outputs 2
Enter fullscreen mode Exit fullscreen mode

In fact, many programming languages provide native implementations of queues in their standard libraries like: Python, Java, C# & C++

It's important to note that for large datasets or frequent insertions and removals, using an array as a queue might not be the most efficient solution, and dedicated queue implementations might be more suitable.

I hope this little article have tickled your brain cells a bit, and made you want to know more about stacks and queues; if you're a JS dev, you would want to study stack in details.
Thank you, and I will see you in the next post.
Best,
Bek

Heroku

This site is built on Heroku

Join the ranks of developers at Salesforce, Airbase, DEV, and more who deploy their mission critical applications on Heroku. Sign up today and launch your first app!

Get Started

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs