javascriptroom blog

Queue in JavaScript

In the world of computer science, data structures play a crucial role in organizing and managing data efficiently. One such important data structure is the queue. A queue follows the First-In-First-Out (FIFO) principle, which means that the first element added to the queue will be the first one to be removed. This is similar to a real - world queue, like people waiting in line at a ticket counter.

In JavaScript, we can implement a queue using various techniques. In this blog, we will explore different ways to implement a queue, understand common operations, and learn about best practices.

2026-07

Table of Contents#

  1. What is a Queue?
  2. Implementing a Queue in JavaScript
  3. Common Queue Operations
  4. Best Practices
  5. Example Usage
  6. Conclusion
  7. References

What is a Queue?#

A queue is a linear data structure that follows the FIFO principle. It has two main operations: enqueue (adding an element to the end of the queue) and dequeue (removing an element from the front of the queue). Other operations like peek (viewing the front element without removing it), checking if the queue is empty, and getting the size of the queue are also commonly used.

Implementing a Queue in JavaScript#

Using an Array#

The simplest way to implement a queue in JavaScript is by using an array. We can use the push() method to enqueue elements and the shift() method to dequeue elements.

class Queue {
    constructor() {
        this.items = [];
    }
 
    enqueue(element) {
        this.items.push(element);
    }
 
    dequeue() {
        if (this.isEmpty()) {
            return null;
        }
        return this.items.shift();
    }
 
    peek() {
        if (this.isEmpty()) {
            return null;
        }
        return this.items[0];
    }
 
    isEmpty() {
        return this.items.length === 0;
    }
 
    size() {
        return this.items.length;
    }
}
 
// Example usage
const queue = new Queue();
queue.enqueue(1);
queue.enqueue(2);
queue.enqueue(3);
console.log(queue.dequeue()); // Output: 1

Using a Linked List#

We can also implement a queue using a linked list. A linked list consists of nodes, where each node contains a value and a reference to the next node.

class Node {
    constructor(value) {
        this.value = value;
        this.next = null;
    }
}
 
class QueueLinkedList {
    constructor() {
        this.front = null;
        this.rear = null;
        this.size = 0;
    }
 
    enqueue(element) {
        const newNode = new Node(element);
        if (this.isEmpty()) {
            this.front = newNode;
            this.rear = newNode;
        } else {
            this.rear.next = newNode;
            this.rear = newNode;
        }
        this.size++;
    }
 
    dequeue() {
        if (this.isEmpty()) {
            return null;
        }
        const removedNode = this.front;
        this.front = this.front.next;
        if (this.front === null) {
            this.rear = null;
        }
        this.size--;
        return removedNode.value;
    }
 
    peek() {
        if (this.isEmpty()) {
            return null;
        }
        return this.front.value;
    }
 
    isEmpty() {
        return this.size === 0;
    }
 
    getSize() {
        return this.size;
    }
}
 
// Example usage
const queueLL = new QueueLinkedList();
queueLL.enqueue(10);
queueLL.enqueue(20);
queueLL.enqueue(30);
console.log(queueLL.dequeue()); // Output: 10

Common Queue Operations#

Enqueue#

The enqueue operation is used to add an element to the end of the queue. In the array - based implementation, we use the push() method, and in the linked - list implementation, we create a new node and update the rear pointer.

Dequeue#

The dequeue operation is used to remove an element from the front of the queue. In the array - based implementation, we use the shift() method, and in the linked - list implementation, we update the front pointer.

Peek#

The peek operation is used to view the front element of the queue without removing it. In both the array - based and linked - list implementations, we simply return the value of the front element.

Is Empty#

The isEmpty() method checks if the queue is empty. In the array - based implementation, we check if the length of the array is zero, and in the linked - list implementation, we check if the size property is zero.

Size#

The size() method returns the number of elements in the queue. In the array - based implementation, we return the length of the array, and in the linked - list implementation, we return the size property.

Best Practices#

  • Choose the Right Implementation: If you need a simple implementation and the number of elements is not very large, using an array is a good choice. However, if you need to perform a large number of enqueue and dequeue operations, a linked - list implementation may be more efficient as the shift() method in an array has a time complexity of O(n).
  • Error Handling: Always check if the queue is empty before performing dequeue or peek operations to avoid errors.
  • Encapsulation: Use classes to encapsulate the queue operations and data, making the code more modular and easier to maintain.

Example Usage#

Let's consider a real - world scenario where we are simulating a printer queue.

class PrinterQueue {
    constructor() {
        this.queue = new Queue();
    }
 
    addDocument(document) {
        this.queue.enqueue(document);
        console.log(`${document} has been added to the printer queue.`);
    }
 
    printDocument() {
        if (this.queue.isEmpty()) {
            console.log("The printer queue is empty.");
        } else {
            const document = this.queue.dequeue();
            console.log(`Printing ${document}...`);
        }
    }
}
 
const printer = new PrinterQueue();
printer.addDocument("Report.doc");
printer.addDocument("Presentation.pdf");
printer.printDocument(); // Output: Printing Report.doc...

Conclusion#

Queues are an important data structure in computer science, and JavaScript provides multiple ways to implement them. Whether you choose an array - based or linked - list - based implementation depends on your specific requirements. By following best practices and understanding common operations, you can use queues effectively in your JavaScript applications.

References#