JavaScript Queue

Summary: in this tutorial, you will learn about the queue data structure and how to implement a JavaScript queue using methods of the Array type.

Introduction to the Queue data structure

A queue is an ordered list of elements where an element is inserted at the end of the queue and is removed from the front of the queue.

Unlike a stack, which works based on the last-in, first-out (LIFO) principle, a queue works based on the first-in, first-out (FIFO) principle.

A queue has two main operations involving inserting a new element and removing an existing element.

The insertion operation is called enqueue, and the removal operation is called dequeue. The enqueue operation inserts an element at the end of the queue, whereas the dequeue operation removes an element from the front of a queue.

The following figure illustrates a queue:

Another important operation of a queue is getting the element at the front called peek. Different from the dequeue operation, the peek operation just returns the element at the front without modifying the queue.

The name queue comes from the analogy to a queue of customers at a bank. The customer who comes first will be served first, and the one who comes later is queued at the end of the queue and will be served later.

Implementing a JavaScript queue using an array

You can use an array as a queue by using two methods of the Array type:

• Add an element at the end of the array using the push() method. This method is equivalent to the enqueue operation.
• Remove an element from the front of an array using the shift() method. It is the same as the dequeue operation.

Let’s implement a JavaScript queue data structure by using an array.

The following is the constructor of the queue:

function Queue() {
   this.elements = [];
}
Code language: JavaScript (javascript)

The Queue() constructor function uses an array to store its elements.

The enqueue() method adds an element at the end of the queue. We use the push() method of the array object to insert the new element at the end of the queue.

Queue.prototype.enqueue = function (e) {
   this.elements.push(e);
};
Code language: JavaScript (javascript)

The dequeue() method removes an element from the front of the queue. In the dequeue() method, we use the shift() method of the array to remove an element at the front of the queue.

// remove an element from the front of the queue
Queue.prototype.dequeue = function () {
    return this.elements.shift();
};
Code language: JavaScript (javascript)

The isEmpty() method checks if a queue is empty by checking if the length property of the array is zero.

// check if the queue is empty
Queue.prototype.isEmpty = function () {
    return this.elements.length == 0;
};
Code language: JavaScript (javascript)

The peek() method accesses the element at the front of the queue without modifying it.

// get the element at the front of the queue
Queue.prototype.peek = function () {
    return !this.isEmpty() ? this.elements[0] : undefined;
};
Code language: JavaScript (javascript)

To query the length of a queue, we develop the length() method:

Queue.prototype.length = function() {
    return this.elements.length;
}
Code language: JavaScript (javascript)

To create a new queue from the Queue() constructor function, you use the new keyword as follows:

let q = new Queue();
Code language: JavaScript (javascript)

To enqueue numbers from 1 to 7, you use the following code.

for (let i = 1; i <= 7; i++) {
    q.enqueue(i);
}
Code language: JavaScript (javascript)

To get the number at the front of the queue, you use the peek() method.

// get the current item at the front of the queue
console.log(q.peek()); // 1
Code language: JavaScript (javascript)

To get the current length of the queue, you use the length() method as in the following example.

// get the current length of queue
console.log(q.length()); // 7
Code language: JavaScript (javascript)

To remove the element at the front of the queue, you use the dequeue() method as follows:

// dequeue all elements
while (!q.isEmpty()) {
    console.log(q.dequeue());
}

//1
//2
//3
//4
//5
//6
//7
Code language: JavaScript (javascript)

Now, you should have a good understanding of the queue data structure and know how to use the push() and shift() methods of the Array type to implement a queue in JavaScript.