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:
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:
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:
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:
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:
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:
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”:
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”:
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:
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:
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:
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:
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:
After removing “40” element, now re-check queue length and the print out the remaining queue elements:
console.log("Remaining Queue elements are " + queue.print());
Check out the front element of the 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:
Lastly, verify if the queue is empty or not:
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.
