JavaScript Queue

In this section, we will take an introduction of the queue and also see how to implement a queue in JavaScript.

What is Queue

A queue is a data structure where the data is organized in the form of a queue. We can understand a queue similar to a queue of men organized for voting in which the man who is standing first in the queue will first give the vote and then will leave the queue. The same thing happens in the case of a data queue where the element which is at the first position will be removed first and so on. Thus, the queue follows the FIFO principle, i.e., first-in, first-out. It means the element which arrived first will get removed from the queue first. Thus, the queue data structure is an ordered list of data values where the values are inserted from the end of the queue and are removed from the front side of the queue.

Implementing a Queue

Let's see an example through which we can understand the implementation of a queue:

class Queue1 {
    constructor (){
    	 this.data = [];
     	this.rear = 0;
     	this.size = 10;
   }
}

In the above code, we have used the following three variables where each variable specifies their use as:

data: It is the array where we store the values or elements of the queue.
rear: It is the variable that is used for storing the position value where the next element will get inserted in the queue.
size: It is the size defined for the queue that will tell the number of elements contained in a queue.

Therefore, similar to stack operations, there are also two main operations of a queue through which we can insert an element into the stack or remove an existing element from it. These operations are:

Enqueue: An enqueue operation is the one that is used when we need to insert an element to the queue. It inserts an element from the back end of the queue.
Dequeue: A dequeue operation is used when we need to delete or remove the existing elements from the queue. The dequeue operation is used to remove an existing element from the front end of the queue.

In respect to these main methods of the queue, there are some other methods also available that can be applied over the queue, which are:

Peek (): The peek () method is used to get the value that is present at the front end of the queue.
isEmpty (): Such an operation is used to check if the queue has elements or it is empty.
printQueue (): The printQueue() function is used to return all the elements present in the queue in the form of a string.

We will discuss the practical implementation of these operations of a queue.

Implementing Queue Operations

Now, we will see the practical implementation of these queue operations, which are as follows:

1) enqueue (): The queue operation which is used for adding elements to the queue.

Example:

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

In the above code, we have added elements to the queue using the push function.

2) dequeue (): The queue operation which is used for removing or popping out the existing values from the queue.

Example:

dequeue() {
   
     if(this.isEmpty() === false) {
          
          this.rear = this.rear-1;
          return this.data.shift();
     }
}

In the above code, firstly, we have checked if the queue is already empty or not. It is because if the queue has no value, it will return "Underflow". Else, it will check and return the element.

3) Length (): The queue operation is used to return the length of the queue.

Example:

length() {
    
     return this.rear;
 }

The statement this.rear will help to fetch the length of the queue.

4) isEmpty (): The queue operation is used to check whether the queue is empty or not. If the queue is found empty, it returns true. Otherwise, it returns false.

Example:

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

In the above code, it will check if the value of the rear, i.e., the end, is equal to 0 or not. If it is true, it will return true else false will be returned.

5) print (): The queue operation is used to print the elements of the queue from the index value 0 to the rear position of the queue.

Example:

print() {
   for(let i =0; i < this.rear; i++) {
      console.log(this.data[i]);
    }
}

In the above code, using for loop and beginning from the 0 indexes to the queue's rear position, it will print the value and put it in the data array.

6) clear (): The queue operation is used to clear or delete all the elements of the queue and makes the value of the rear equal to 0.

Example:

clear() {
   this.data.length = 0;
   this.rear = 0;
}

In the above code, using the clear () operation, the value in the data array becomes 0 and sets the rear value to 0.

Implementing the JavaScript Queue

The complete code:

class Queue {
   
   constructor(){
     
     this.data = [];
     this.rear = 0;
     this.size = 20;
   }
   
    enqueue(ele) {
    if(this.rear < this.size ) {
          this.data[this.rear] = ele;
          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;
   }
}

Although the functionality of a queue is the same in every programming language, the use and syntax vary as per the programming language.

Next TopicJavaScript Form

← prev next →