How to Implement Queue in JavaScript: Simple Guide

You can implement a queue in JavaScript using an array by adding elements with push() and removing them with shift(). Alternatively, create a class with methods like enqueue and dequeue to manage the queue cleanly.

Syntax

A queue can be implemented using an array with two main operations:

• enqueue(item): Add an item to the end using push().
• dequeue(): Remove the first item using shift().

Alternatively, use a class with these methods to encapsulate the queue behavior.

javascript

class Queue {
  constructor() {
    this.items = [];
  }

  enqueue(item) {
    this.items.push(item); // Add to end
  }

  dequeue() {
    return this.items.shift(); // Remove from front
  }

  peek() {
    return this.items[0]; // View front item
  }

  isEmpty() {
    return this.items.length === 0;
  }
}

Example

This example shows how to create a queue, add items, remove items, and check the front item.

javascript

class Queue {
  constructor() {
    this.items = [];
  }

  enqueue(item) {
    this.items.push(item);
  }

  dequeue() {
    if (this.isEmpty()) {
      return 'Queue is empty';
    }
    return this.items.shift();
  }

  peek() {
    if (this.isEmpty()) {
      return 'Queue is empty';
    }
    return this.items[0];
  }

  isEmpty() {
    return this.items.length === 0;
  }
}

const queue = new Queue();
queue.enqueue('apple');
queue.enqueue('banana');
queue.enqueue('cherry');
console.log(queue.dequeue()); // apple
console.log(queue.peek());    // banana
console.log(queue.dequeue()); // banana
console.log(queue.isEmpty()); // false
console.log(queue.dequeue()); // cherry
console.log(queue.isEmpty()); // true

Output

apple
banana
banana
false
cherry
true

Common Pitfalls

Common mistakes when implementing a queue include:

• Using pop() instead of shift() for dequeue, which removes from the end, not the front.
• Not checking if the queue is empty before dequeuing, causing errors or unexpected results.
• Modifying the array directly without encapsulating queue logic, which can lead to bugs.

javascript

/* Wrong dequeue using pop() */
const queue = [];
queue.push(1);
queue.push(2);
const wrongDequeue = queue.pop(); // Removes last item, not first

/* Correct dequeue using shift() */
const correctQueue = [];
correctQueue.push(1);
correctQueue.push(2);
const correctDequeue = correctQueue.shift(); // Removes first item

Quick Reference

Operation	Method	Description
Add item	enqueue(item) / push()	Add item to the end of the queue
Remove item	dequeue() / shift()	Remove item from the front of the queue
Check front	peek()	View the first item without removing it
Check empty	isEmpty()	Returns true if queue has no items

Key Takeaways

Use an array with push() to add and shift() to remove items for a simple queue.

Encapsulate queue logic in a class for cleaner and safer code.

Always check if the queue is empty before removing items to avoid errors.

Avoid using pop() for dequeue as it removes from the wrong end.

Use peek() to see the front item without removing it.