Implementing Queue data structure in JavaScript

Lets start from the most obvious question in this context;

What are data structures in programming?

In computer science, a data structure is a format to organize, manage and store data in a way that allows efficient access and modification.

Data structures are the most basic concept of any programming language that help us play with data. We store data in different data types based on the data and what we want to do with it.

For instance, if you want to store user form input, you would like to store it as an object as key value pairs, with keys being input name and value being the user input. If you want to store list of choices by user, i don't know about you, but I would store it as an array.

Different datastructures store data in a different way, work on that data in its own way, and expose data in a unique manner too. Lets have a look at Queue data structure.

Queue Data Structure:

Queue data structure works similar as a real life queue. People keep joining from the end of the queue, and people leave from the front. This specific pattern in programming terms is referred as FIFO (First in, first out) pattern. We enqueue and item from one side and dequeue from the other end, so the item that gets added first, leaves first. Come first, get served first. If you have some data logic that needs to follow this pattern, you should implement Queue data structure.

Implementation:

Lets start by creating a JavaScript ES6 Class. We will define a constructor function to initialize and array that will mimic queue.

1class Queue {
2  constructor() {
3    this.array = [] // intiate stacks as empty array
4  }
5}

Queue methods:

We are gonna need to add some methods to our class, to enqueue items and dequeue items. Along with this we are gonna create few utility functions to view data, empty the queue, etc.

Utility Methods (size, isEmpty):

1class Queue {
2  constructor() {
3    this.array = [] // intiate queue as empty array
4  }
5  
6  size() {
7    return this.array.length
8  }
9  
10  isEmpty(){
11    return this.array.length === 0
12  }
13}

size: returns the length property of the array, which is length of the queue.

isEmpty: This method simply checks the length of the array.

Add Data (enqueue):

1class Queue {
2  constructor() {
3    this.array = [] // intiate queue as empty array
4  }
5  
6  size() {
7    return this.array.length
8  }
9  
10  isEmpty(){
11    return this.array.length === 0
12  }
13  
14  enqueue(i) {
15    // add item to the queue
16    this.array.push(i);
17  }
18}

enqueue: enqueue item uses push array method to add item to the end of the array.

Remove Data (dequeue):

1class Queue {
2  constructor() {
3    this.array = [] // intiate queue as empty array
4  }
5  
6  isEmpty() {
7    // check if stack is empty
8    return this.array.length === 0;
9  }
10
11  enqueue(i) {
12    // add item to the queue
13    this.array.push(i);
14  }
15
16  dequeue() {
17    if (this.isEmpty()) return "Nothing to Remove";
18    return this.array.shift();
19  }
20}

dequeue: dequeue method returns the first item of the queue, and removes it.

Viewing Data (peek, print):

Lets create front method to get the first item of the queue and the print method to print out all of the entries.

1class Queue {
2  constructor() {
3    this.array = [] // intiate queue as empty array
4  }
5  
6  isEmpty() {
7    // check if stack is empty
8    return this.array.length === 0;
9  }
10
11  enqueue(i) {
12    // add item to the queue
13    this.array.push(i);
14  }
15
16  dequeue() {
17    if (this.isEmpty()) return "Nothing to Remove";
18    return this.array.shift();
19  }
20  
21  front() {
22    if (this.isEmpty()) return "Nothing in Front";
23    return this.array[0]
24  }
25
26  print() {
27    let str = "";
28    for (let i = 0; i < this.array.length; i++) {
29      str += this.array[i] + " ";
30    }
31    return str;
32  }
33}

front: front method returns the first item of the queue.

print: print method iterates over all of the items while keep concatenating them to a result string. In the end, returns it.

Additional Methods:

You can always add other queue methods as it suits your case. Maybe you would want to add invert method that reverses the order of the items in queue. Like;

1invert() {
2    if (!this.isEmpty()) return this.array.reverse();
3  }

Queue Use:

Lets create instance of Queue class, and try using different methods.

1// renaming console.log
2const l = console.log;
3
4// create Queue instance
5let queue = new Queue();
6
7l(queue.print()); // ""
8l(queue.enqueue("Item 1"));
9l(queue.enqueue("Item 2"));
10l(queue.enqueue("Item 3");
11l(queue.size(); // 3
12l(queue.dequeue()); // "Item 1"
13l(queue.front()); // "Item 2"
14l(queue.print()); // "Item 2" "Item 3"

Have a good day. See you in next one.