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.

Queue Data Structure

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.

comments powered by Disqus

Related Posts

The Great JavaScript Debate: To Semicolon or Not?

Since I’ve started learning this language, JavaScript has undergone some heavy changes. Most notably, it seems to be the norm to not use semicolons anymore.

Read more

Hacktoberfest 2024: Get a Free JavaScript Today Sticker

October is here, and that means one thing in the tech world—Hacktoberfest! This annual event, powered by DigitalOcean, Cloudflare, Quira, and other sponsors, encourages developers of all skill levels to contribute to open-source projects.

Read more

Creating a Real Time Chat Application with React, Node, and TailwindCSS

In this tutorial, we will show you how to build a real-time chat application using React and Vite,as well as a simple Node backend.

Read more