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.
Dequeue Operation in Queue: In Queue, accessing the content while removing it from the front end of the queue, is known as a Dequeue Operation.
Approach: A Dequeue operation may involve the following steps:
- Checks that the queue is empty or not. If the queue is empty then it produces an error and exit.
- If the queue is not empty then accesses the data element at which front end is pointing.
- Delete the element, using array.pop() operation on buffer.
- Return success.
Example 1: This example implements enqueue operation to create a queue.
<!DOCTYPE html> <html> <head> <title>Dequeue Operation in Queue</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); queue1.enqueue(25); </script> </body> </html> |
Output:
After Executing two Dequeue Operations by calling queue1.dequeue() function, the front value changes to 3.
Example 2:
<!DOCTYPE html> <html> <head> <title>Dequeue Operation in Queue</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); } // Dequeue function Queue.prototype.dequeue = function() { return this.array.shift(); } // 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); queue1.enqueue(25); // Call to Dequeue Function queue1.dequeue(); queue1.dequeue(); </script> </body> </html> |
Output:
