JavaScript

How to Implement JavaScript Queue Using an Array

Suppose there is a queue of customers at a bank reception waiting to resolve their queries. In this scenario, the customer who arrived first will be served first, while those who came later will be positioned at the end of the queue and served accordingly.

Queue in JavaScript works on the same principle known as “First In First Out”, where the first element added to the queue will be removed first. It is based on two operations: “Enqueue” and “Dequeue”, where “Enqueue” refers to adding an element at the end of the queue and the “Dequeue” method is utilized to remove the front element, using array “shift()” method. JavaScript arrays offer built-in “push()” and “shift()” methods; therefore, you can use an array to implement queues efficiently.

This write-up will discuss the method to implement JavaScript Queue using an array. So, let’s start!

How to implement JavaScript Queue using an array

To implement Queue in JavaScript, we will create a “Queue” class and declare an array named “items” in its constructor. This “items” array will be utilized to store queue elements:

class Queue{

  constructor() {

  items = [];

  }

}

After creating a Queue class, add the below-given methods to perform different operations on the queue elements.

How to Enqueue an element in JavaScript Queue

Enqueue” refers to the operation of adding an element to the end of the queue. In our JavaScript Queue class, we will define an “enqueue()” method to add the elements at end of the queue, with the help of the “items” array “push()” method:

enqueue(element){

  console.log(element + " is added to JavaScript queue.");

  this.items.push(element);

}

How to Dequeue an element from JavaScript Queue

The “dequeue()” method is used to delete or remove the starting or front element of a JavaScript queue. Invoking the “shift()” method in the “dequeue()” method will assist in removing the front end element from the created queue:

dequeue() {

  return this.items.shift();

}

How to check length of JavaScript Queue

The “length” property of the “items” array will return the length of the JavaScript queue:

length() {

  return this.items.length;

}

How to peek an element from JavaScript Queue

The “peek()” method is utilized to fetch the element that exists on the front of the JavaScript queue without modifying it:

peek() {

  return this.items[0];

}

How to print elements of JavaScript Queue

To print all of the Queue elements, we will define a “print()” method in the JavaScript Queue class. This method will return a string named “str” that comprises all of the queue elements:

print(){

  var str = "";

  for(var i = 0; i < this.items.length; i++)

    str += this.items[i] +" ";

  return str;

}

How to Clear JavaScript Queue

To remove all queue elements at once, you have to set the “length” property of the “items” array to “0”:

clear() {

  console.log( "Queue is cleared");

  this.items.length = 0;

}

How to Check if JavaScript Queue is empty

After clearing the elements, you can reconfirm that the JavaScript queue is empty or not. To do so, define an “isEmpty()” method and then use the strict equality operator “===” for comparing the length of the “items” array to “0”:

isEmpty() {

  return this.items.length === 0;

}

The given “isEmpty()” method will return a boolean value, where “true” means that the “items” array is empty and “false” indicates that it is not empty.

Now, let’s move ahead and practically implement the JavaScript Queue using an array and utilize the discussed methods:

Example: How to Implement JavaScript Queue using an array

Here is the complete code which we have added in our program for implementing JavaScript Queue:

class Queue {

  constructor() {

    this.items = [];

  }

  //Enqueue an element to Queue

  enqueue(element) {

    console.log(element + " is added to JavaScript queue.");

    this.items.push(element);

  }

  //Dequeue an element from Queue

    dequeue() {

  return this.items.shift();

  }

  //Check Queue length

  length() {

    return this.items.length;

  }

  //Check front element of Queue

  peek() {

    return this.items[0];

  }

  //Print Queue elements

  print() {

    var str = "";

    for (var i = 0; i < this.items.length; i++)

      str += this.items[i] + " ";

    return str;

  }

  //Clear Queue

  clear() {

    console.log("Queue is cleared");

    this.items.length = 0;

  }

  //Check if Queue is empty

  isEmpty() {

    return this.items.length === 0;

  }

}

Firstly, we will create an instance of the “Queue” class and “enqueue”  following three values to the “items” array:

var queue= new Queue();

queue.enqueue(40);

queue.enqueue(50);

queue.enqueue(60);

In the next step, we will check the length of the created queue by invoking the “length()” method:

console.log(queue.length());

The given output signifies that the length of the JavaScript Queue is “3”:

Next, use the “peek()” method to print out the front element of the queue:

console.log(queue.peek()+ " is at the front of queue");

As you can see from the output that “40” is placed at the front of our created JavaScript queue:

Then, we will dequeue the front element from the queue:

console.log(queue.dequeue() + " is removed from the queue");

After removing “40” element, now re-check queue length and the print out the remaining queue elements:

console.log(queue.length());

console.log("Remaining Queue elements are " + queue.print());

Check out the front element of the queue:

console.log(queue.peek()+ " is at the front of queue");

After removing the element “40”, “50” is now at the front of the JavaScript queue:

Now, we will clear the queue by utilizing the “queue.clear()” method:

queue.clear();

Lastly, verify if the queue is empty or not:

queue.isEmpty();

In the following output, “true” indicates that the length of the queue is equal to “0,” which means that the queue is empty:

That was all about the essential information about implementing the JavaScript queue using an array. You can further explore it according to your requirements.

Conclusion

Arrays in JavaScript offer the “push()” and “shift()” methods that permit you to implement the JavaScript queue efficiently. After creating an array, you can perform further operations such as adding or removing an element to the queue, checking the front element, clearing the whole queue, and verifying its length. This write-up discussed the procedure to implement JavaScript Queue using an array.

About the author

Sharqa Hameed

I am a Linux enthusiast, I love to read Every Linux blog on the internet. I hold masters degree in computer science and am passionate about learning and teaching.