Simple Explanation of Stack and Queue with JavaScript

So we have arrived now at our next stop in the series of “Understanding Data Structure and Algorithms with JavaScript 🚀”, which is Stack and Queue data structure. Stack and Queue are two linear data structures with a direct process to store data and how to move from one unit of data to the next.

In this blog, we will read and know what is stack and Queue, the important methods used, their implementation using JavaScript, and their difference.

What is Stack?

A Stack is a Linear Data Structure that follows the LIFO (Last In First Out) principle. In the stack deletion and insertion of the elements takes place from one end only the stack known as the Top. To visualize, you can imagine it as a bunch of books kept on top of each other and a book can only be removed from the top.

Also read, Simple Explanation on Searching Algorithms with JavaScript

Implementation with Javascript

There are many ways you can implement Stack, what really identifies data structure to be Stack is its LIFO principle, not the implementation, here we mainly going to see two types of implementation,

In JavaScript, there are two ways to implement Stack using an array,
Using the Built-in Array Method to create our own Stack

let stack = [];

stack.push(1)
stack.push(2)
stack.push(3)

// Stack after inserting values
console.log(stack) // [1,2,3]

stack.pop()
// Stack after poping a value
console.log(stack) // [1,2]

Creating our own Stack through Class Method

class Stack {
    constructor() {
        this.items = [];
    }
    
    // add element to the stack
    push(element) {
        return this.items.push(element);
    }
    
    // remove element from the stack
    pop() {
        if(this.items.length > 0) {
            return this.items.pop();
        }
    }
    
    // view the last element
    peek() {
        return this.items[this.items.length - 1];
    }
    
    // check if the stack is empty
    isEmpty(){
       return this.items.length == 0;
    }
   
    // the size of the stack
    size(){
        return this.items.length;
    }
 
    // empty the stack
    clear(){
        this.items = [];
    }
}

let stack = new Stack();
stack.push(1);
stack.push(2);
stack.push(4);
stack.push(8);
console.log(stack.items); //[1, 2, 4, 8]

stack.pop();
console.log(stack.items); //[1, 2, 4]

console.log(stack.peek()); //4

console.log(stack.isEmpty()); //false

console.log(stack.size()); //3

stack.clear();
console.log(stack.items); //[]

Basic operations of Stack

• push() – The Push Method is used to add a new element to the end of the stack.
• pop() – The Pop Method is used to remove the elements from the end of the stack.
• peek() – The Peek Method is used to return the last element of the stack.
• isEmpty() – The isEmpty Method is check if the stack is empty or not.
• size() – The Size Method is used to return the length/size of the stack.
• clear() – The Clear Method is used to return a new stack with no elements.

 Advantages

• Stack has a very small learning curve and is beginner-friendly.
• Stack is used to solving problems that are based on recursion.

Disadvantages

• Random Access of elements is not possible.

Also read, Simple Explanation on Sorting Algorithms with JavaScript | Part 1

What is Queue?

A Queue is a Linear Data Structure that follows the FIFO (First In First Out) principle. In the queue, deletion and insertion of the elements take place from the opposite end of the queue known as the Rear and Front. To visualize, you can imagine it as a line of people standing at the ticket counter, the first person who came can only move away first from the line.

Implementation with Javascript

There are many ways you can implement Queue, what really identifies data structure to be Queue is its FIFO principle, not the implementation, here we mainly going to see two types of implementation,

In JavaScript, there are two ways to implement Queue using an array,

Using the Built-in Array Method to create our own Queue

let queue = [];

queue.push(1)
queue.push(2)
queue.push(3)

// Queue after inserting values
console.log(queue) // [1, 2, 3]

queue.shift()
// Queue after poping a value
console.log(queue) // [2, 3]

Creating our own Queue through Class Method

class Queue {
    constructor() {
        this.items = [];
    }
    
    // add element to the queue
    enqueue(element) {
        return this.items.push(element);
    }
    
    // remove element from the queue
    dequeue() {
        if(this.items.length > 0) {
            return this.items.shift();
        }
    }
    
    // view the last element
    peek() {
        return this.items[this.items.length - 1];
    }
    
    // check if the queue is empty
    isEmpty(){
       return this.items.length == 0;
    }
   
    // the size of the queue
    size(){
        return this.items.length;
    }
 
    // empty the queue
    clear(){
        this.items = [];
    }
}

let queue = new Queue();
queue.enqueue(1);
queue.enqueue(2);
queue.enqueue(4);
queue.enqueue(8);
console.log(queue.items); //[1, 2, 4, 8]

queue.dequeue();
console.log(queue.items); //[2, 4, 8]

console.log(queue.peek()); //8

console.log(queue.isEmpty()); //false

console.log(queue.size()); //3

queue.clear();
console.log(queue.items); //[]

Also read, A.I. Can Now Write Its Own Computer Code. That’s Good News for Humans.

Basic operations of Queue

• enqueue() – The Enqueue Method is used to add a new element to the end of the queue.
• dequeue() – The Dequeue Method is used to remove the elements from the starting of the queue.
• peek() – The Peek Method is used to return the last element of the queue.
• isEmpty() – The isEmpty Method is to check if the queue is empty or not.
• size() – The Size Method is used to return the length/size of the queue.
• clear() – The Clear Method is used to return a new queue with no elements.

Advantages

• A queue is fast and well optimized.

Disadvantages

• Elements can be enqueued or dequeued only at the front or end of the queue.
• Due to the FIFO principle, searching for elements is difficult.

Difference between Stack and Queue?

Also read, Easy Explanation of Linked list Data Structure in JavaScript

Final Words

This blog was focused on Stack and Queue and saw the implementation and discussed their advantages, disadvantages, and their difference. If you have any questions then post them down below in the comments sections.

I hope you liked the article and if you did then share it with your friends and colleagues, and bookmark this site to get awesome articles like these.