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

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

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