Implementing a Queue Data Structure in JavaScript [Examples]

A queue is a commonly used data structure in programming. Here’s how to implement and use a queue in JavaScript.

JavaScript doesn’t include a data structure specifically called a queue – but that doesn’t mean the functionality isn’t there.

JavaScript arrays can be used in the same way – it’s just the terminology that’s a bit different. Rather than duplicating array functionality for queues, queue functionality exists in the array functions of JavaScript.

What is a Queue Data Structure?

A queue is a sequence of items in a specific order. Items can be enqueued (added to the queue) or dequeued (removed from the queue).

Items are added to the front of the queue, and as they are completed, removed from the back of the queue. This is called First In First Out (FIFO).

If you’ve ever lined up at the checkout at the supermarket – that’s a queue. Customers join the queue (enqueue) when they wish to pay and leave the store and leave the queue (dequeue) after paying for their items. Queues in programming work precisely the same way – add items to the queue, and remove them once whatever task you wish to perform on them is completed.

JavaScript Arrays as Queues

JavaScript Arrays make great queues – the functionality required is there; it’s just included as part of the Array object rather than as a separate Queue object.

Code talks – so here’s a queue implemented using a JavaScript array:

Defining the Queue

Below, an empty array is used to initialize the queue:

var petsQueue = [];// Create an empty array to act as a queue

Add Items to the Queue (Enqueue)

The push() method can be used on the array to add items to the queue:

petsQueue.push('dog'); // Adds 'dog' to the queue
petsQueue.push('cat'); // Adds 'cat' to the queue
petsQueue.push('bird'); // Adds 'bird' to the queue

View the Contents of the Queue

You can output the contents of the queue to the console using console.log():

console.log(petsQueue) // [ "dog", "cat", "bird" ]

Removing Items from the Queue (Dequeue)

When removing an item from the queue, we’ll want to do something with it. Below, an item is removed from the queue and stored in a new variable for use:

var nextPet = petsQueue.shift(); // The queue is now ['cat', 'bird']
console.log(nextPet);            // displays 'dog'

You can now perform actions on nextPet, and when done, move on to the next item in the queue.

You can store any type of object or variable in the queue – objects representing tasks or people can be added and removed for processing.

Full Example – Using a JavaScript Array as a Queue

Below, a queue is defined, some items are added, and then a while loop is used to process the queue until it is emptied:

var petsQueue = [];// Create an empty array to act as a queue

petsQueue.push('dog'); // Adds 'dog' to the queue
petsQueue.push('cat'); // Adds 'cat' to the queue
petsQueue.push('bird'); // Adds 'bird' to the queue

console.log(petsQueue) // Check the contents of the queue - [ "dog", "cat", "bird" ]

// Loop through the queue until it is empty (when it's length is zero)
while (petsQueue.length > 0) {
    var nextPet = petsQueue.shift(); // Dequeue the next pet and assign them to a variable
    console.log(nextPet + ' has been washed!');// Do something with the item taken from the queue
}   

console.log(petsQueue) // Confirm that the queue was fully processed - it is now empty with the value [ ]