How to implement Queue in Javascript?

The main principle of queue datastructure is FIFO (First in First Out). If we compare with real life queue example, people standing in a queue are nodes. Queue implementation can be done in two ways: using array and using object.

Implement Queue using array:

First we create an array named queue.

Second we push some elements using push()

Third we remove elements using shift()

Fourth to check if the queue is empty we use queue.length and see whether empty or not

// Initializing queue array.
var queue = [];

// Inserting vales into the queue.
queue.push(1);
queue.push(2);
queue.push(3);
queue.push(4);
queue.push(5);

console.log("The current queue is: ", queue);

// Removing element form queue using array method: shift()
var removed_element = queue.shift();
console.log("Removed element is: ", removed_element);

console.log("The current queue is: ", queue);

// We can check the if the queue is empty or not using the array.length method.
if (queue.length > 0) {
  console.log("The Queue is not empty!");
} else {
  console.log("The Queue is empty!");
}

Output:

Using objects:

Here we will create a class node.

class Node {
    constructor(value) {
        this.value = value;
        this.next = null;
    }
}

This class has 2 parameters:

this.value – the value which node stores

this.next – the pointer to next node in queue and initially it is assigned to null as there is no nodes in queue

Now we need to create another class to store all the nodes and perform queue operations.

class Queue {
    constructor() {
        this.head = null;
        this.tail = null;
        this.length = 0;
    }
}

This class has 3 properties:

this.head – pointer to first node
this.tail -pointer to last node
this.length – number of nodes in queue

Methods of a queue:

enqueue() – To add elements at rear end of the queue
dequeue() – To remove elements from front end of the queue
peek() – To get the front element without removing it.
isEmpty() – To check whether an element is present in the queue or not.
print() – To print the elements in the queue
getLength() – Returns the number of nodes in a queue.

class Node {
    constructor(value) {
        this.value = value;
        this.next = null;
    }
}

class Queue {
    constructor() {
        this.head = null;
        this.tail = null;
        this.length = 0;
    }

    enqueue(value) {
        const node = new Node(value);

        if (this.head) {
            this.tail.next = node;
            this.tail = node;
        } else {
            this.head = node;
            this.tail = node
        }

        this.length++;
    }

    dequeue() {
        const current = this.head;
        this.head = this.head.next;
        this.length--;

        return current.value;
    }

    isEmpty() {
        return this.length === 0;
    }

    peek() {
        return this.head.value;
    }

    getLength() {
        return this.length;
    }

    print() {
        let current = this.head;

        while(current) {
            console.log(current.value);
            current = current.next;
        }
    }
}

const queue = new Queue();
console.log('is empty?', queue.isEmpty())
queue.enqueue(12)
queue.enqueue(24)
queue.enqueue(36)
queue.enqueue(48)
queue.enqueue(60)
console.log('Queue:')
queue.print()
console.log('Remove 2 elements')
queue.dequeue()
queue.dequeue()
console.log('Queue:');  queue.print()
console.log('is empty?', queue.isEmpty())
console.log('Length',    queue.getLength())
console.log('Head', queue.peek())

Output:

To know more about the data structures in javascript click here!