{ "componentChunkName": "component---src-templates-blog-post-js", "path": "/implementing-the-queue-data-structure-in-javascript/", "result": {"data":{"markdownRemark":{"html":"
\n\n
\n

Queue

\n

Queue is a data structure that consists of a list of records such that records are added at one end and removed from the other.

\n

The queue data structure is exactly like a queue in real life. Think of a group of people standing in a line at an ATM kiosk to withdraw cash.

\n

FIFO

\n

With queues, the first record added to the queue is the first record to be removed. This is known as the FIFO (First In, First Out) principle.

\n

Usually, we refer to the beginning of the queue as its front and the end of the queue as its back.

\n

Enqueue & Dequeue

\n

The common terms for inserting a record in a queue is known as enqueuing and removing a record from a queue is known as dequeuing.

\n

Restrictions

\n

With queues, we have 3 restrictions:

\n\n

Let’s see a queue in action beginning with an empty array:

\n

First we insert 1, then we insert 10, then we insert 100:

\n

\n \n \n \n \n

\n

Finally, we are left with only the number 100 in the array.

\n

Abstract data type

\n

Queue is not a built-in data type in JavaScript. To implement a queue, we use another built-in data structure to hold the data. In our case, we will use arrays, which are built-in data structures in JavaScript. This is why a queue is known as an abstract data type.

\n

Implementing a queue

\n

We can implement a queue using JavaScript classes.

\n
Learn about JavaScript classes in my blog post here
\n
class Queue {\n  constructor() {\n    this.data = []\n  }\n\n  add(element) {\n    return this.data.unshift(element)\n  }\n\n  remove() {\n    return this.data.pop()\n  }\n\n  peek() {\n    return this.data[this.data.length - 1]\n  }\n}\n\nconst atmQueue = new Queue()\n\nconsole.log(atmQueue.add(1))\nconsole.log(atmQueue.add(10))\nconsole.log(atmQueue.add(100))\n\nconsole.log(atmQueue)\n\n// Queue { data: [ 100, 10, 1 ] }\n\nconsole.log(atmQueue.remove())\n\nconsole.log(atmQueue)\n// Queue { data: [ 100, 10 ] }\n\nconsole.log(atmQueue.peek())\n// 10
\n

As you can see, our queue implementation stores data in an array called data. The add() method inserts an item at the front of the array. The remove() method removes an item from the back of the array. And the peek() method reads the last item of the array.

\n

By implementing a Queue class, what we have done in essence, is we have built an interface around the array data structure such that we are allowed to interact with our data in limited ways.

\n","frontmatter":{"title":"Implementing a Queue Data Structure in JavaScript","date":"2021-07-18"}}},"pageContext":{"slug":"/implementing-the-queue-data-structure-in-javascript/","prev":{"fields":{"slug":"/implementing-a-stack-data-structure-in-javascript/"},"frontmatter":{"modules":null}},"next":{"fields":{"slug":"/printing-a-pyramid-pattern-in-javascript/"},"frontmatter":{"modules":null}}}}, "staticQueryHashes": ["3159585216"]}