Queue Data Structure’s in JavaScript

A Practical illustration.

Jun 01, 2020

This article was first published on here, easily copy and paste code samples and discover more contents like this on Devjavu.

Data Structure?

A Data Structure in computing is a “structure” (the arrangement of and relations between the parts or elements of something) of data values that outlines the relationships that exist between these values and the functions or operations that can be applied to all or some of these values.

Okay, So what are Queues?

Well, Queues are a type of data structure that holds a collection of data in a linear/sequential (a set of related events, movements, or items that follow each other in a particular order) form, where modification is made by the addition of entities at one end of the sequence and the removal of entities from the other end of the sequence.

where modification is made by the addition of entities at one end of the sequence and the removal of entities from the other end of the sequence.

This might sound familiar to you if you have basic computer science or accounting knowledge. It’s the FIFO (First In, First Out) concept.

FIFO in computing and in systems theory is a method for organising the manipulation of a data structure — often, specifically, a data buffer — in which the first items entered are the first ones to be removed.

Cool, so where is this applicable?

A Practical Example

So far, we’ve only talked about the theoretical definitions. Let’s take a Pizza shop as a practical illustration. Que-minos is the name of this shop — they make pizza. Ideally, they take and deliver orders in sequence on a “first-come, first-served” (FIFO) basis. Each customer walks in, heads over to the counter, places an order, and sits to wait. Once the first order is complete, the pizza is delivered, and the next in line is handled.

It was the best name I could come up with, really.

With JavaScript, it’s almost evident that queues would have to be implemented using the Array object (Arrays are JavaScript’s strongest data structure — arguably, of course).

We would be implementing a Queminos class to represent our Queue Structure. This class would have some essential methods to:

placeOrder (enqueue): This method adds a new order to the list of orders. Also referred to as Enqueue — adding (an item of data awaiting processing) to a queue.
deliverOrder (dequeue): This method delivers an order to a customer after completion. It performs the Dequeue function, removing an element from the queue after settlement.
upNext: this method returns the next customer to be attended to after the current order is delivered (ideally, the order should be at index 1).
hasOrders: This helper method allows Queminos to determine whether there are any orders available.
orders: this would be a getter method; it would help us see all available orders.

Folder Structure

We’ll have a simple folder structure, one file to hold our Queminos class, another to import and use the class, and one more to hold orders data.

.
|-- Queminos.js
|-- app.js
`-- data.json

Queminos Class

Here we’re using the class declaration to create the Queminos class. We then declare a private class property “orders” and set the value to an empty array. This would hold all the orders received by Queminos.

In ES2019, private class fields are defined using a hash # prefix: This is required so certain fields/properties of a class would not be mutable or accessible outside that class (e.g from an instance of the class). This is designed around the idea of Encapsulation in OOP.

Alright, let’s implement each of the methods:

Since we’re unable to access/mutate the “orders” property outside the class (because it’s private), we’ll implement a getter method “orders” that returns the private “orders” property.

The placeOrder method takes a single parameter “order”, and adds it to the array of orders. This is basically our enqueue method.

The deliverOrder method, which implements the dequeue method, removes the first element from the orders array (remember FIFO?). First, we use the hasOrders method to check whether there are any orders in the queue before attempting to remove any.

Here’s a list of practical examples of Array methods in JavaScript.

The upNext method, as mentioned earlier, returns the next order in the queue to be addressed. First, we need to check if there are orders, then check if there’s an order right behind the current one.

Finally, the hasOrder method checks whether the #orders array contains orders.

Our Queminos class should now look like this:

Note that we’re exporting the Queminos class so we can use it outside of this file.

Data

Our JSON data is pretty basic. It’s a list of received orders in object format. You could make it simpler and use strings if you wish.

We’ll import our class into the app.js file as well as our JSON data. From here we can test our Queueing system.

There you have it, a practical implementation of Queues in JavaScript.

A note from In Plain English

Did you know that we have four publications and a YouTube channel? You can find all of this from our homepage at plainenglish.io — show some love by giving our publications a follow and subscribing to our YouTube channel!

Here’s a link to the source code.

Cheers. ☕️

Devjavu