Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Queue Data Structure in Javascript
In this article, we are going to discuss the queue data structure in JavaScript. It is a linear data structure where the enqueue and dequeue of elements follow the FIFO (first in first out) principle. The queue is open at both ends - one end is used to insert data (enqueue) and the other is used to remove data (dequeue). We use two pointers: rear for insertion and front for removal.
A real-world example of the queue can be a single-lane one-way road, where the vehicle that enters first, exits first. Other examples include printer job queues, task scheduling, and customer service lines.
Queue Operations
The main operations performed on a queue are:
- Enqueue: Add an element to the rear of the queue
- Dequeue: Remove an element from the front of the queue
- Peek/Front: View the front element without removing it
- isEmpty: Check if the queue is empty
- Size: Get the number of elements in the queue
Basic Queue Implementation
Here's how to implement a queue class in JavaScript with essential operations:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Queue Data Structure</title>
</head>
<body>
<script>
class Queue {
constructor() {
this.queArr = [];
this.frontIdx = 0; // head
this.rearIdx = 0; // tail
}
enqueue(elem) {
this.queArr[this.rearIdx] = elem;
this.rearIdx++;
}
dequeue() {
if (this.isEmpty()) {
document.write("Queue Underflow..!<br>");
return;
}
let elem = this.queArr[this.frontIdx];
delete this.queArr[this.frontIdx];
this.frontIdx++;
return elem;
}
peek() {
return "The peek element of the Queue is: " + this.queArr[this.frontIdx] + "<br>";
}
size() {
return this.rearIdx - this.frontIdx;
}
isEmpty() {
return this.rearIdx === this.frontIdx;
}
display() {
if (this.size() !== 0) {
let elements = [];
for (let i = this.frontIdx; i < this.rearIdx; i++) {
elements.push(this.queArr[i]);
}
return "The Queue elements are: " + elements + "<br>";
} else {
return "The Queue is Empty..!<br>";
}
}
}
let queue = new Queue();
queue.enqueue(10);
queue.enqueue(20);
queue.enqueue(30);
queue.enqueue(40);
document.write(queue.display());
document.write(queue.peek());
document.write("The size of the Queue is: " + queue.size() + "<br>");
</script>
</body>
</html>
The Queue elements are: 10,20,30,40 The peek element of the Queue is: 10 The size of the Queue is: 4
Complete Queue Operations Example
This example demonstrates all queue operations including enqueue, dequeue, and clearing the queue:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Complete Queue Operations</title>
</head>
<body>
<script>
class Queue {
constructor() {
this.queArr = [];
this.frontIdx = 0;
this.rearIdx = 0;
}
enqueue(elem) {
this.queArr[this.rearIdx] = elem;
this.rearIdx++;
}
dequeue() {
if (this.isEmpty()) {
document.write("Queue Underflow..!<br>");
return;
}
let elem = this.queArr[this.frontIdx];
delete this.queArr[this.frontIdx];
this.frontIdx++;
return elem;
}
peek() {
if (this.isEmpty()) {
return "Queue is empty<br>";
}
return "The peek element is: " + this.queArr[this.frontIdx] + "<br>";
}
size() {
return this.rearIdx - this.frontIdx;
}
isEmpty() {
return this.rearIdx === this.frontIdx;
}
display() {
if (this.size() !== 0) {
let elements = [];
for (let i = this.frontIdx; i < this.rearIdx; i++) {
elements.push(this.queArr[i]);
}
return "Queue elements: " + elements + "<br>";
} else {
return "The Queue is Empty..!<br>";
}
}
clear() {
this.queArr = [];
this.frontIdx = 0;
this.rearIdx = 0;
return "Queue cleared!<br>";
}
}
let queue = new Queue();
// Add elements
queue.enqueue(5);
queue.enqueue(15);
queue.enqueue(25);
queue.enqueue(35);
document.write(queue.display());
document.write(queue.peek());
document.write("Size: " + queue.size() + "<br>");
// Remove element
document.write("Dequeued: " + queue.dequeue() + "<br>");
document.write(queue.display());
// Clear queue
document.write(queue.clear());
document.write(queue.display());
</script>
</body>
</html>
Queue elements: 5,15,25,35 The peek element is: 5 Size: 4 Dequeued: 5 Queue elements: 15,25,35 Queue cleared! The Queue is Empty..!
Key Points
- Queue follows FIFO (First In First Out) principle
- Elements are added at the rear and removed from the front
- Two pointers (frontIdx and rearIdx) track the queue boundaries
- Always check if the queue is empty before dequeue operations
- Time complexity: O(1) for enqueue, dequeue, and peek operations
Conclusion
The queue data structure is essential for scenarios requiring ordered processing. JavaScript's array-based implementation provides efficient FIFO operations, making it ideal for task scheduling, breadth-first search algorithms, and handling asynchronous operations.
724 Views
