JavaScript - how to implement queue

In this short article, we would like to show how to use JavaScript built-in queues.

In JavaScript, the queue data structure is combined with Array. There are available push, pop, shuft and unshift methods that we can use as enqueue and dequeue methods.

Methods usage in variants:

1. push(...) as enqueue and shift() as dequeue,
2. unshift(...) as enqueue and pop() as dequeue.

Check the below examples to know more about how it works.

1. push / shift based queue example

Let's suppose we want to queue and dequeue: A, B and C.

To do it we need to call 3 times push(...) and later 3 times shift().

Simple example:

// ONLINE-RUNNER:browser;

var queue = [ ]; // new Array()

queue.push('A'); // enqueue A
queue.push('B'); // enqueue B
queue.push('C'); // enqueue C

console.log('Queue contains: ' + queue.join(', '));

console.log(queue.shift()); // dequeue A
console.log(queue.shift()); // dequeue B
console.log(queue.shift()); // dequeue C

console.log('Queue contains: ' + queue.join(', '));

2. unshift / pop based queue example

This kind of queue works the same way but keeps items in reversed order - in the first example printing for filled queue returned A, B, C, so in this example it will be C, B, A.

To enqueue items we use unshift method that puts items at beginning of the queue.

To dequeue items we use pop method that removes items from the end of the queue.

Simple example:

// ONLINE-RUNNER:browser;

var queue = [ ]; // new Array()

queue.unshift('A'); // enqueue A
queue.unshift('B'); // enqueue B
queue.unshift('C'); // enqueue C

console.log('Queue contains: ' + queue.join(', '));

console.log(queue.pop()); // dequeue A
console.log(queue.pop()); // dequeue B
console.log(queue.pop()); // dequeue C

console.log('Queue contains: ' + queue.join(', '));

3. Multiple items per one enqueue operation example

We are able to insert many items during one enqueue operation.

Variant 1 - simple example:

// ONLINE-RUNNER:browser;

var queue = [ ]; // new Array()

queue.push('A', 'B', 'C'); // enqueue A, B and C

console.log('Queue contains: ' + queue.join(', '));

console.log(queue.shift()); // dequeue A
console.log(queue.shift()); // dequeue B
console.log(queue.shift()); // dequeue C

console.log('Queue contains: ' + queue.join(', '));

Variant 2 - simple example:

Hint: be careful to use it becouse it changed enqueue ordering and can lead to mistakes.

// ONLINE-RUNNER:browser;

var queue = [ ]; // new Array()

queue.unshift('A', 'B', 'C'); // enqueue A, B and C

console.log('Queue contains: ' + queue.join(', '));

console.log(queue.pop()); // dequeue A
console.log(queue.pop()); // dequeue B
console.log(queue.pop()); // dequeue C

console.log('Queue contains: ' + queue.join(', '));