What is Queue?
A Queue is a linear structure which follows a particular order in which the operations are performed. The order is First In First Out (FIFO). A good example of a queue is any queue of consumers for a resource where the consumer that came first is served first. It takes constant time to add or remove an element in a queue.
Queues should be used over arrays when we need to work with data in the FIFO form.
Limitation of Queue: It can access only one element at a time.
In JavaScript, arrays have methods like pop and shift that defines the Queue class: Enqueue and Dequeue operations. With this, a queue can be easily implemented.
Basic skeleton of queue: Below example run using “$node skeleton.js” command to get basic queue skeleton.
javascript
// Define Queue function function Queue(array) { this.array = []; if (array) this.array = array;}// Add Get Buffer property to object // constructor which slices the arrayQueue.prototype.getBuffer = function() { return this.array.slice();}// Add isEmpty properties to object constructor// which returns the length of the arrayQueue.prototype.isEmpty = function() { return this.array.length == 0;}// Instance of the Queue classvar queue1 = new Queue(); //Queue { array: [] }console.log(queue1); |
Example:
javascript
<!DOCTYPE html><html><head> <title>Enqueue Operation</title> <meta charset="UTF-8"> <script src= type="text/javascript"></script> <style> body { padding: 0; margin: 0; } canvas { vertical-align: top; } </style></head><body> <script> // Define Queue function function Queue(array) { this.array = []; if (array) this.array = array; } // Add Get Buffer property to object // constructor which slices the array Queue.prototype.getBuffer = function() { return this.array.slice(); } // Add isEmpty properties to object constructor // which returns the length of the array Queue.prototype.isEmpty = function() { return this.array.length == 0; } // Instance of the Queue class var queue1 = new Queue(); // Queue { array: [] } console.log(queue1); // Add Push property to object constructor // which push elements to the array Queue.prototype.enqueue = function(value) { this.array.push(value); } function setup() { // Create Canvas of size display width * 300 createCanvas(displayWidth, 300); } function draw() { // Set background color background("grey"); // Set stroke weight strokeWeight(3); textAlign(CENTER); textSize(24); text("Queue Implementation Using P5.js", windowWidth/2, 20); textAlign(LEFT); textSize(14); // Set stroke color stroke('green'); line(10, 45, 90, 45); rect(10, 30, 60, 30); noStroke(); text("FRONT", 20, 50); // Display queue for(var i = 0; i <= queue1['array'].length-1; i++) { var p = 10; translate(70, 0); strokeWeight(3); stroke('green'); line(10+p, 45, p+80, 45); rect(10+p, 30, 40+p, 30); noStroke(); text(queue1['array'][i], 40, 50); p += 10; } // Set stroke color stroke('green'); translate(70, 0); rect(10, 30, 60, 30); noStroke(); text("REAR", 20, 50); } // Peek Function Queue.prototype.peek = function() { return this.array[this.array.length-1]; } // Driver Code // Call to Enqueue operation queue1.enqueue(1); queue1.enqueue(2); queue1.enqueue(3); queue1.enqueue(19); queue1.enqueue(11); queue1.enqueue(15); queue1.enqueue(14); queue1.enqueue(18); </script></body></html> |
Output:
After Enqueuing ’25’ by calling queue1.enqueue(25) function of rear changes to 25.
