Implementation of Priority Queue in Javascript
Last Updated :
20 Dec, 2023
Priority Queue is an extension of Queue having some properties as follows:
- Each element of the priority queue has a priority associated with it.
- Elements are added to the queue as per priority.
- Lowest priority elements are removed first.
We can design a priority queue using two approaches in the first case we can add the queue element at the end of the queue and we can remove the elements of the queue depending on the priority. In the second case, we can add elements to the queue according to the priority and remove them from the front of the queue. In this article, we will use the second approach to implement a Priority Queue.
Note: Assuming a Priority queue can grow dynamically we are not considering the overflow condition.
Let’s see an example of a priority queue class:
Example: This example shows the use of the priority queue class.
JavaScript
// User defined class
// to store element and its priority
class QElement {
constructor(element, priority)
{
this.element = element;
this.priority = priority;
}
}
// PriorityQueue class
class PriorityQueue {
// An array is used to implement priority
constructor()
{
this.items = [];
}
// functions to be implemented
// enqueue(item, priority)
// dequeue()
// front()
// isEmpty()
// printPQueue()
}
As you can see in the example above we have defined the skeleton of PriorityQueue class. We have used a user-defined class QElement having two property elements and priority. We have used an array in the PriorityQueue class to implement the priority queue, this array is a container of QElement.
1. enqueue(): It adds an element to the queue according to its priority.
JavaScript
// enqueue function to add element
// to the queue as per priority
enqueue(element, priority)
{
// creating object from queue element
let qElement = new QElement(element, priority);
let contain = false;
// iterating through the entire
// item array to add element at the
// correct location of the Queue
for (let i = 0; i < this.items.length; i++) {
if (this.items[i].priority > qElement.priority) {
// Once the correct location is found it is
// enqueued
this.items.splice(i, 0, qElement);
contain = true;
break;
}
}
// if the element have the highest priority
// it is added at the end of the queue
if (!contain) {
this.items.push(qElement);
}
}
In this method, we create a qElement have property element and priority. Then we iterate over the queue to find the correct location of the qElement according to its priority and add it.
2. dequeue(): Removes an element from the priority queue
JavaScript
// dequeue method to remove
// element from the queue
dequeue()
{
// return the dequeued element
// and remove it.
// if the queue is empty
// returns Underflow
if (this.isEmpty())
return "Underflow";
return this.items.shift();
}
This function removes an element from the front of a queue as the highest priority element is stored at the front of the priority queue. We have used the shift method of an array to remove an element from the queue.
3. front(): It returns the front element of the Priority queue
JavaScript
// front function
front()
{
// returns the highest priority element
// in the Priority queue without removing it.
if (this.isEmpty())
return "No elements in Queue";
return this.items[0];
}
This function returns the front element of the Priority queue. We simply return the 0th element of an array to get the front of a Priority queue.
4. rear(): It returns the last element of the Priority queue
JavaScript
// rear function
rear()
{
// returns the lowest priority
// element of the queue
if (this.isEmpty())
return "No elements in Queue";
return this.items[this.items.length - 1];
}
This function returns the last element of the queue or the lowest priority element.
Helper Methods: Let’s declare some helper method that is quite useful while working with the Priority queue.
1. isEmpty(): Returns true if the Priority queue is empty
JavaScript
// isEmpty function
isEmpty()
{
// return true if the queue is empty.
return this.items.length == 0;
}
We have used the length property of an array to get the length and if it's 0 then the priority queue is empty.
2. printPQueue(): It prints the element of the queue as per the priority starting from highest to lowest
JavaScript
// printQueue function
// prints all the element of the queue
printPQueue()
{
let str = "";
for (let i = 0; i < this.items.length; i++)
str += this.items[i].element + " ";
return str;
}
In this method, we concatenate the element property of each priority queue item into a string.
Note: Here we consider " 1 " as the highest priority element, you can modify this as per the requirement.
Implementation: Now let's use this Priority Queue class and its different method described above
JavaScript
// creating object for queue class
let priorityQueue = new PriorityQueue();
// testing isEmpty and front on an empty queue
// return true
console.log(priorityQueue.isEmpty());
// returns "No elements in Queue"
console.log(priorityQueue.front());
// adding elements to the queue
priorityQueue.enqueue("Sumit", 2);
priorityQueue.enqueue("Gourav", 1);
priorityQueue.enqueue("Piyush", 1);
priorityQueue.enqueue("Sunny", 2);
priorityQueue.enqueue("Sheru", 3);
// prints [Gourav Piyush Sumit Sunny Sheru]
console.log(priorityQueue.printPQueue());
// prints Gourav
console.log(priorityQueue.front().element);
// prints Sheru
console.log(priorityQueue.rear().element);
// removes Gouurav
// priorityQueue contains
// [Piyush Sumit Sunny Sheru]
console.log(priorityQueue.dequeue().element);
// Adding another element to the queue
priorityQueue.enqueue("Sunil", 2);
// prints [Piyush Sumit Sunny Sunil Sheru]
console.log(priorityQueue.printPQueue());
The above implementation is not efficient and is slower. We can further optimize this Priority by Using Heap.
Optimized Approach: We will store the elements of the Priority Queue in the heap structure. When using priority queues the highest priority element is always the root element. There are basically two kinds of the heap:
In Min Heap, the smallest element is basically the root element and the child elements are always greater than the parent element whereas in the case of Max Heap the root element is the largest
So, if we want the smallest element in our priority queue to have the highest priority we use Min Heap otherwise we use Max Heap
The time complexity using Min Heap or Max Heap for different methods is:
- Peek : O(1)
- Remove: O(log N)
- Add : O(log N)
To learn more about Min Heap and Max Heap, please refer to the Introduction to Heap – Data Structure and Algorithm Tutorials article.
Example: Let us now look at the implementation of Priority Queue using Min Heap
JavaScript
class PriorityQueue {
constructor() {
this.heap = [];
}
// Helper Methods
getLeftChildIndex(parentIndex) {
return 2 * parentIndex + 1;
}
getRightChildIndex(parentIndex) {
return 2 * parentIndex + 2;
}
getParentIndex(childIndex) {
return Math.floor((childIndex - 1) / 2);
}
hasLeftChild(index) {
return this.getLeftChildIndex(index)
< this.heap.length;
}
hasRightChild(index) {
return this.getRightChildIndex(index)
< this.heap.length;
}
hasParent(index) {
return this.getParentIndex(index) >= 0;
}
leftChild(index) {
return this.heap[this.getLeftChildIndex(index)];
}
rightChild(index) {
return this.heap[this.getRightChildIndex(index)];
}
parent(index) {
return this.heap[this.getParentIndex(index)];
}
swap(indexOne, indexTwo) {
const temp = this.heap[indexOne];
this.heap[indexOne] = this.heap[indexTwo];
this.heap[indexTwo] = temp;
}
peek() {
if (this.heap.length === 0) {
return null;
}
return this.heap[0];
}
// Removing an element will remove the
// top element with highest priority then
// heapifyDown will be called
remove() {
if (this.heap.length === 0) {
return null;
}
const item = this.heap[0];
this.heap[0] = this.heap[this.heap.length - 1];
this.heap.pop();
this.heapifyDown();
return item;
}
add(item) {
this.heap.push(item);
this.heapifyUp();
}
heapifyUp() {
let index = this.heap.length - 1;
while (this.hasParent(index) && this.parent(index)
> this.heap[index]) {
this.swap(this.getParentIndex(index), index);
index = this.getParentIndex(index);
}
}
heapifyDown() {
let index = 0;
while (this.hasLeftChild(index)) {
let smallerChildIndex = this.getLeftChildIndex(index);
if (this.hasRightChild(index) && this.rightChild(index)
< this.leftChild(index)) {
smallerChildIndex = this.getRightChildIndex(index);
}
if (this.heap[index] < this.heap[smallerChildIndex]) {
break;
} else {
this.swap(index, smallerChildIndex);
}
index = smallerChildIndex;
}
}
}
// Creating The Priority Queue
let PriQueue = new PriorityQueue();
// Adding the Elements
PriQueue.add(32);
PriQueue.add(45);
PriQueue.add(12);
PriQueue.add(65);
PriQueue.add(85);
console.log(PriQueue.peek());
console.log(PriQueue.remove());
console.log(PriQueue.peek());
console.log(PriQueue.remove());
console.log(PriQueue.peek());
console.log(PriQueue.remove());
Output:
12
12
32
32
45
45
Explanation: Internally an array is used to store the elements of the priority queue. Element with the minimum value is of the highest priority and is stored as root. We use the helper function peek() to access the element and remove() to pull the element out of the queue.
In the case of Max Heap implementation, we will see that the element with the maximum value should have the highest priority. Similar to Min Heap the highest priority element will be the root element. The helper functions will remain the same only the comparison operators sign in heapifyDown() and heapifyUp() will be reversed.
Example: Priority queue using Max Heap
JavaScript
class PriorityQueue {
constructor() {
this.heap = [];
}
// Helper Methods
getLeftChildIndex(parentIndex) {
return 2 * parentIndex + 1;
}
getRightChildIndex(parentIndex) {
return 2 * parentIndex + 2;
}
getParentIndex(childIndex) {
return Math.floor((childIndex - 1) / 2);
}
hasLeftChild(index) {
return this.getLeftChildIndex(index)
< this.heap.length;
}
hasRightChild(index) {
return this.getRightChildIndex(index)
< this.heap.length;
}
hasParent(index) {
return this.getParentIndex(index) >= 0;
}
leftChild(index) {
return this.heap[this.getLeftChildIndex(index)];
}
rightChild(index) {
return this.heap[this.getRightChildIndex(index)];
}
parent(index) {
return this.heap[this.getParentIndex(index)];
}
swap(indexOne, indexTwo) {
const temp = this.heap[indexOne];
this.heap[indexOne] = this.heap[indexTwo];
this.heap[indexTwo] = temp;
}
peek() {
if (this.heap.length === 0) {
return null;
}
return this.heap[0];
}
// Removing an element will remove the
// top element with highest priority then
// heapifyDown will be called
remove() {
if (this.heap.length === 0) {
return null;
}
const item = this.heap[0];
this.heap[0] = this.heap[this.heap.length - 1];
this.heap.pop();
this.heapifyDown();
return item;
}
add(item) {
this.heap.push(item);
this.heapifyUp();
}
heapifyUp() {
let index = this.heap.length - 1;
while (this.hasParent(index) && this.parent(index)
< this.heap[index]) {
this.swap(this.getParentIndex(index), index);
index = this.getParentIndex(index);
}
}
heapifyDown() {
let index = 0;
while (this.hasLeftChild(index)) {
let smallerChildIndex = this.getLeftChildIndex(index);
if (this.hasRightChild(index) && this.rightChild(index)
> this.leftChild(index)) {
smallerChildIndex = this.getRightChildIndex(index);
}
if (this.heap[index] > this.heap[smallerChildIndex]) {
break;
} else {
this.swap(index, smallerChildIndex);
}
index = smallerChildIndex;
}
}
}
// Creating The Priority Queue
let PriQueue = new PriorityQueue();
PriQueue.add(32);
PriQueue.add(45);
PriQueue.add(12);
PriQueue.add(65);
PriQueue.add(85);
// Removing and Checking elements of highest Priority
console.log(PriQueue.peek());
console.log(PriQueue.remove());
console.log(PriQueue.peek());
console.log(PriQueue.remove());
console.log(PriQueue.peek());
console.log(PriQueue.remove());
Output:
85
85
65
65
45
45
Explanation: Now the element with the highest priority is the one with the highest value. So insertion and deletion have changed but time complexities remain the same.
Similar Reads
JavaScript Tutorial JavaScript is a programming language used to create dynamic content for websites. It is a lightweight, cross-platform, and single-threaded programming language. It's an interpreted language that executes code line by line, providing more flexibility.JavaScript on Client Side: On the client side, Jav
11 min read
Web Development Web development is the process of creating, building, and maintaining websites and web applications. It involves everything from web design to programming and database management. Web development is generally divided into three core areas: Frontend Development, Backend Development, and Full Stack De
5 min read
React Interview Questions and Answers React is an efficient, flexible, and open-source JavaScript library that allows developers to create simple, fast, and scalable web applications. Jordan Walke, a software engineer who was working for Facebook, created React. Developers with a JavaScript background can easily develop web applications
15+ min read
JavaScript Interview Questions and Answers JavaScript (JS) is the most popular lightweight, scripting, and interpreted programming language. JavaScript is well-known as a scripting language for web pages, mobile apps, web servers, and many other platforms. Both front-end and back-end developers need to have a strong command of JavaScript, as
15+ min read
React Tutorial React is a JavaScript Library known for front-end development (or user interface). It is popular due to its component-based architecture, Single Page Applications (SPAs), and Virtual DOM for building web applications that are fast, efficient, and scalable.Applications are built using reusable compon
8 min read
Domain Name System (DNS) DNS is a hierarchical and distributed naming system that translates domain names into IP addresses. When you type a domain name like www.geeksforgeeks.org into your browser, DNS ensures that the request reaches the correct server by resolving the domain to its corresponding IP address.Without DNS, w
8 min read
Introduction to Tree Data Structure Tree data structure is a hierarchical structure that is used to represent and organize data in the form of parent child relationship. The following are some real world situations which are naturally a tree.Folder structure in an operating system.Tag structure in an HTML (root tag the as html tag) or
15+ min read
NodeJS Interview Questions and Answers NodeJS is one of the most popular runtime environments, known for its efficiency, scalability, and ability to handle asynchronous operations. It is built on Chromeâs V8 JavaScript engine for executing JavaScript code outside of a browser. It is extensively used by top companies such as LinkedIn, Net
15+ min read
HTML Interview Questions and Answers HTML (HyperText Markup Language) is the foundational language for creating web pages and web applications. Whether you're a fresher or an experienced professional, preparing for an HTML interview requires a solid understanding of both basic and advanced concepts. Below is a curated list of 50+ HTML
14 min read
What is an API (Application Programming Interface) In the tech world, APIs (Application Programming Interfaces) are crucial. If you're interested in becoming a web developer or want to understand how websites work, you'll need to familiarize yourself with APIs. Let's break down the concept of an API in simple terms.What is an API?An API is a set of
10 min read