Oscar Ortiz

Posted on Feb 19, 2023

JavaScript Data Structure Pt 3: Queue

#welcome

Introduction
Prerequisites
First-In, First-Out
Queue Operations
Final Queue Structure
Conclusion
Exercises

Introduction

In this tutorial, we will dive into the Queue data structure, and this is part 3 of a follow-up tutorial from our JavaScript Data Structure series. By the end of this tutorial, we will learn how to explain, define, and use a Queue Data Structure in JavaScript. We will assume you have some basic knowledge of JavaScript to follow along.

Prerequisites

Basic JavaScript syntax and concepts
Basic understanding of JavaScript Arrays
Familiar with this keyword
Familiar with Class objects and Functions

First In, First Out

The Queue Data Structure is a linear data structure where elements are inserted at the end of the array and removed at the front of the array, mainly known as First-In, First-Out, or FIFO. It benefits many everyday things that we might not have noticed initially. When we watch videos on YouTube, we tend to see a playlist of videos; after we watch the first video, the following video is already in Queue, ready to play after the end of the first video, and so on—one of many ways to utilize the Queue Data Structure.

Term: Queue Data Structure
Definition: A data structure in which elements are organized in a linear order. Each element is inserted from the rear and removed from the front of the structure.

Synonyms: Arrays, Stack, Linked List, Queue
Acronyms: FIFO

Queue Operations

Now that we know what the Queue Data Structure can be helpful for. Let’s learn how to create it in JavaScript. There are a few operations that our Queue Structure should be able to handle. We will start with our Queue Class Object, where we store our operation functions and construct our array. We will initiate a JavaScript class named Queue

Queue Class

 class Queue {}

Using the class keyword to create a unique function that will allow us to define our functions to work with data

class MDN

Array constructor

The class object comes with built-in methods, the constructor() being one of the most commonly used to create an object instance of that class.

class Queue {
  constructor(){
    this.items = [];
  }
}

Using the constructor function, we create a new instance variable named items and assign it an empty array
this keyword is a reference to our items object within our function

We can now call our Queue class using the new keyword, where it will automatically call the constructor and initiate our items variable, and assign an empty array.

let queue = new Queue()

console.log(queue.items) // []

Initiate a Queue class with the new keyword
Log out our items property from our new queue

Constructor MDN

this MDN

Array MDN

Enqueue function

The purpose of our Queue is to add elements to the rear of our structure. We can use the built-in push method to insert an element to the end of our items.

enqueue(element){
  this.items.push(element);
}

The element inside our parameters will be the item we will pass into our function.
Using the push() method on our items will add the element to the end of the items.

push() MDN

Dequeue function

Our Queue should be able to remove the first element of our items array. We can use the built-in shift method to accomplish this.

dequeue(){
  return this.items.shift()
}

Using the shift() method will remove the first element in our items

Front function

We need to be able to check what is about to be removed from the front of our structure too. We can quickly return the first element of our array by accessing the first element of our array.

front(){
  return this.items[0]
}

We can easily access the first element in our items array by using the array indices using brackets [] and the first integer of the array, which is 0

Array indices MDN

Check Empty function

Checking if we have an empty items array is also a nice feature to include. We can return a true or false result by checking the length of our items. If our items are strictly equal to zero, then it is true; otherwise false.

checkEmpty(){
  return this.items.length === 0;
}

Using the strictly equals === operation allows us to compare the size of our items with 0 easily, returning true or false

Strictly Equals === MDN

Print Queue

We need to see what our entire Queue structure looks like. Printing out our Queue. We can do so by iterating through our array and returning the elements in a string for readability.

printQueue(){
  let str = ""
    for(let i = 0; i < this.items.length; i++){
        str += this.items[i] + ", ";    
    }

    return str
}

Our function printQueue()
let str an empty string where our elements will be added
for loop allows us to loop through an array where we can check the length of our array and iterate till we reach the end of the array
In our for loop statement, we assign each element that is iterated and add a space for readability.
Returning the final results from our str when the for loop is done iterating.

for loop MDN

Final Queue Structure

class Queue {
  constructor(){
    this.items = []
  }

  enqueue(element){
    this.items.push(element)
  }

  dequeue(){
    this.items.shift()
  }

  front(){
    return this.items[0]
  }

  checkEmpty(){
    return this.items.length === 0;
  }

  printQueue(){
    let str = "";
    for(let i = 0; i < this.items.length; i++){
      str += this.items[i] + ", "
    }
    return str
  }

}

Let us review what we have implemented. We have five functions needed for a FIFO structure or Queue Data Structure. Our enqueue function adds an element to the end of the Queue; the dequeue function removes the first element in the Queue; the front function returns the first item in the Queue; the check empty function returns true or false whether Queue is empty or not, last but not least the print queue function returns a string of our Queue for readability.

You can create a new queue and use its methods like so:

let queue = new Queue();

console.log(queue.isEmpty()); // true

queue.enqueue(10);
queue.enqueue(20);
queue.enqueue(30);

console.log(queue.printQueue()); // 10 20 30
console.log(queue.front()); // 10
console.log(queue.dequeue()); // 10
console.log(queue.printQueue()); // 20 30

Conclusion

In this article, we’ve covered the basics of a Queue Data Structure in JavaScript. We started by discussing the basics of FIFO, then we explored creating the structure's operations, to using our queue structure.

In summary, JavaScript is a powerful tool for modern web development, and we hope this article has given you a solid foundation for exploring it further. Remember to keep learning, practicing, and experimenting, and you'll be well on your way to becoming a proficient JavaScript developer.

Exercises

Why and when should I use a Queue data structure instead of an Array?
What are some types of Queues?
Implement a Queue using two Stacks

DEV Community