Implementing a Queue Data Structure in JavaScript

A queue is a linear data structure that follows the First-In-First-Out (FIFO) principle, meaning that the first item to be added to the queue is the first one to be removed. This makes queues useful for a variety of tasks, including scheduling and managing resources. In this article, we’ll explore the basics of queues in JavaScript and see how to implement them.

An example of a queue data structure. Source: Wikipedia.

Creating a Queue

There are several ways to create a queue in JavaScript, including using arrays, linked lists, and objects. One of the simplest ways to create a queue is by using an array, of which we will do now.

const queue = [];

It’s as simple as that. But we want to be able to add elements to the end of the array and also to remove elements from the beginning of the array.

To add an item to the queue, we can use the .push() array method. The .push method adds an item to the end of the array, which is the “back” of the queue.

queue.push(1);
queue.push(2);
queue.push(3);

To remove an item from the queue, we can use the shift method. The shift method removes the first item from the array, which is the “front of” the queue.

let item = queue.shift();

To access the items in the queue, we can simply access the elements of the array.

console.log(queue); // Logs the entire queue
console.log(queue[1]); // Logs the element at index 1
console.log(queue[3]); // Logs the element at index 3

We can also check if the queue is empty or not, simply by checking if the length of the queue is greater than 0.

// Returns 'true' if the queue has a single element, else returns 'false'.
console.log(queue.length > 0);

Implementing a Queue Class

While using an array is a very simple way to create a queue, it may not be the most efficient or scalable solution for large-scale applications. To address these issues, we can create a custom queue class.

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

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

  dequeue() {
    return this.items.shift();
  }

  size() {
    return this.items.length;
  }

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

With this custom queue class, we can now create and manipulate queues in a more efficient and organized manner.

let queue = new Queue();
queue.enqueue(1);
queue.enqueue(2);
queue.enqueue(3);
console.log(queue.dequeue()); // 1
console.log(queue.dequeue()); // 2
console.log(queue.dequeue()); // 3

Conclusion

Queues are a useful data structure for a variety of tasks in programming, including scheduling and resource management. In JavaScript, we can create queues using arrays, linked lists, objects, or custom classes. Whether you’re working on a small or large project, understanding queues can help you write more efficient and scalable code.

Like this type of content? Feel free to sign up for our newsletter, where you will get notified a few times per month about our latest content.

Don’t forget to share your thoughts or questions in the comments below.