Queue Data Structure in JavaScript

Continuing with Data structures using JavaScript. Today, we will create a Queue class using arrays. I previously stated that in JavaScript, arrays has this functionality by default. Nevertheless, they give you methods that are not part of one data structure, which can lead to unnecessary and unwanted confusion and results.

Characteristics of a Queue

If you arrive at the store and there is a line in the front waiting to enter. When a new person arrives, it is positioned at the end of the line. However, when it is time to enter the store, the first person in line, it is the first person to enter the store. The same concepts apply to a Queue which is First-come, first-served. Additionally, the queue must have the following methods:

  • Enqueue: add items to the end of the queue.
  • dequeue: remove and return the first item of the queue (First In, First Out).
  • Peek: Return the first element of the queue without removing it.
  • Length: to know how many items are in the queue.

Other methods that are very useful for iterating with the queue are:

  • hastItems: return true or false, depending if the queue has items or not.
  • isEmpty: return true or false if depending if the queue is empty or not.

Queue Class in JavaScript

Note that the code code used to implement the Queue data structure in JavaScript is very similar that the one we used to create the Stack class:

class Queue {
    //Private array for the queue
    this.queue = [];
  //Return the size or length of the queue
    return this.queue.length;
  //Same as length()
    return this.length();
  //At new item at the end of the queue
  //Remove and return the item at the front of the queue
    return this.queue.shift();
  //Returns the content of the front item of the queue
    return this.queue[0];
  //Returns if the queue has items or not
    return !!this.length();
  //Returns if the queue is empty or not
    return !this.hasItems();

Using the Queue Class

Similar to what we did with the Stack class, we can use the Queue class to hide methods from the Array object that are not relevant for a queue. Additionally, it allows access only to the front of the queue which leaves the rest of the items hidden and impossible to access without removing items from the front.

Creating an instance from the Queue Class

let queue = new Queue();

Adding items to the Queue

queue.enqueue("new item");

Iterating over the queue

let queue = new Queue();
queue.enqueue("item one");
queue.enqueue("item two");
queue.enqueue("item three");
while(queue.hasItems()) {


It is easy to limit the functionality of an array to make it work as a particular queue or stack data structure. I personally believe that instead of using the array object directly, it is better to constrain it to the methods required by the job instead of leaving every method public that can be misused by other programmers.

Teylor Feliz
Teylor Feliz

Teylor is a seasoned generalist that enjoys learning new things. He has over 20 years of experience wearing different hats that include software engineer, UX designer, full-stack developer, web designer, data analyst, database administrator, and others. He is the founder of Haketi, a small firm that provides services in design, development, and consulting.

Over the last ten years, he has taught hundreds of students at an undergraduate and graduate levels. He loves teaching and mentoring new designers and developers to navigate the rapid changing field of UX design and engineering.

Articles: 182