In this article, we will create a queue data structure with vanilla Javascript. Queues are useful and very easy to understand, because they represent a data structure that you will see almost everyday, a line.
In a queue, the first person that enters the queue is the first person to leave the queue, called a FIFO structure. Think about it the next time you go to bank or enter a line at the grocery store to pay.
How does this work from a software engineering or website development perspective?
It comes up everytime you try to buy tickets to a concert online or how about when you have a customer service question? Usually, you hit the chat button and there is a waiting period for you to speak with a real attendant. It will say something like “We are pairing you with an attendant, your wait time is 5 minutes.” You now know that you’re in the queue and will be taken care of when you leave the queue.
Here are some prerequisite concepts to brush on if you’re new to programming or JavaScript. We will use object-oriented programming to create the structure and functions, ES6 syntax, time-complexity, and the node terminal to read the output.
How to Create a Queue Object and Collection
The first thing we need to do is create the queue itself and in Javascript it is really easy. Using traditional object syntax, declare a function as a Queue.
Next, is to create an empty array and set it to a variable called collection. This is so we can use it as a storage for all the data that we input into it.
Wait … I thought we were making a queue. Why are we creating an array?
We are making an array, because array is a queue if you treat it that way. Which means that you get the benefits of O(1) time complexity by using the .push and .shift method.
The final part of this inital object is the ability to print the collection itself. All we have to do is create a function call print and set it to return the collection array.
Follow the code below…
Add Information to the Queue
Having an empty queue is not very useful, so the first thing we need to do is get some data in there. We do this by creating a method that will push information into it.
The push method is a built in Javascript method which adds an element to the end of the array in O(1) time. This is a huge benefit to using .push and why you should use it whenever it’s practical.
Remove Information from the Queue
Now that we can add information to the queue, we should also be able to remove items from the queue. We do this by using another constant time method called .shift(). Just chain it the collection.shift(); and it will remove the first element of the array. Remember, queues are First In, First Out.
Additional Functions for Gathering Information About the Queue
Lastly, we should have the ability to perform more functions to our queue besides add/removing elements from it.
Let’s say your are making a customer service system that tells the attendants how many people are in the queue waiting for service, or who is next, or if there isn’t anyone in the queue at all. This is a good way to find out important data that managers will use to schedule more attendants to work or when attendants should take breaks, etc.
For this we need to make three new functions.
The front function gives us the first value, by simply using calling accessing the first value, collection[0].
The size function gives us the size of the array and will let use know how many elements are in the array, collection.length.
The isEmpty function gives us a boolean that tells us if the array is empty or not, collection.length === 0.
I hope you found this tutorial useful. What I would suggest is to look further into queues and try to create the customer service queue I talked about earlier. There’s never a better way to learn a new concept than by using it yourself.