JavaScript - how to implement queue

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

In JavaScript 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 below examples to know more how itworks.

1. push / shift based queue example

Lets 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 same way but keeps items in reversed order - in first example printing for filled queue returned A, B, C, so in thins example it will be C, B, A.

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

To dequeue items we use pop method that removes items from the end of 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(', '));