Implementing a Queue in JavaScript

A look at the queue data structure

A queue is a list — similar to the real world queue. The one who gets into the
queue first is the one who is removed first from the queue.

Technically speaking, this process is called first in, first out (FIFO). The element
which is inserted first will be removed first from the list

Elements are always added to the end of the list and removed from the front of
the list.

Different operations in Queue are:

• Enqueue → Add an element to the queue

• Dequeue → Remove an element from the queue

Operations we are going to implement:

• Inserting an element at the end of the queue

• Deleting an element in the front from the queue

• Get the front element

• Get the Last element

• Check if a queue is empty

• Print the elements of the queue

• Print the length of the queue

Let’s create a Queue class.

class Queue {

constructor(){

this.data = [];
this.rear = 0;
this.size = 10; }}
data → is the list in which we store our elements

rear → is used to store the position in which the next element will be stored

size → maximum number of elements a queue can have

Enqueue: Inserting an Element at the

End of the Queue
After inserting an element to the queue, we need to increase the rear value by 1 so
the rear points to the next position where the new element will be inserted.
enqueue(element) { this.data[this.rear] = element;
this.rear = this.rear + 1;}

In addition to the above case, we need to check if the queue is full or not so it
avoids overflow.
enqueue(element) {

if(this.rear < this.size ) { this.data[this.rear] = element;

this.rear = this.rear + 1;
}}

Length: Returns the Length of the

Queue
To get the length of the queue, we can use the rear attribute.
length() {

return this.rear; }

IsEmpty: Check If the Queue Is Empty

If the rear points to 0 , then we can say that the queue is empty. Because
the rear points to the position where the new element will be placed, if
the rear points to 0, there’s no element in the queue
isEmpty() {

return this.rear === 0;}

GetFront: Get the Front Element of the

Queue
In addition to getting the front element, this will check if the queue is empty or
not.
getFront() {

if(this.isEmpty() === false) { return this.data[0]; }}

GetLast: Get the Last Element Added to

the Queue
We know the rear value points the new position, where the next element will be
inserted into the queue. So to get the last element in the queue, we can decrease
the rear index by 1.
getLast() {

if(this.isEmpty() === false) {

return this.data[ this.rear - 1 ] ;

}}

Delete: Deleting the Front Element From

the Queue
The element which is inserted first is the one that is deleted first. So we can
delete the front element and decrease the rear value by 1 so the rear points to the
next position to insert correctly.
dequeue() {

if(this.isEmpty() === false) {

this.rear = this.rear-1;
 return this.data.shift();
}}

Print Elements of the Queue

We can print the elements of the queue from the0 index to the rear-1 index of
the queue.
print() {

for(let i =0; i < this.rear; i++) {

console.log(this.data[i]);
}}

Reset Queue
Delete all elements of the queue and set the rear to 0.
clear() {
this.data.length = 0;
this.rear = 0;}

The End
Let’s combine all the above code together

class
Queue
{

constructor(){

this.data = [];
this.rear = 0;
this.size = 10;
}

enqueue(element) {
if(this.rear < this.size ) {
this.data[this.rear] = element;
this.rear = this.rear + 1;
 }
}
length() {

return this.rear;
}
isEmpty() {

return this.rear === 0;

}
getFront() {

if(this.isEmpty() === false) {

return this.data[0];
}
}
getLast() {

if(this.isEmpty() === false) {

return this.data[ this.rear - 1 ] ;

}
}
dequeue() {

if(this.isEmpty() === false) {

this.rear = this.rear-1;
return this.data.shift();
}
}
print() {
for(let i =0; i < this.rear; i++) {
console.log(this.data[i]);
}
}
clear() {
this.data.length = 0;
this.rear = 0;
}
}