p5.js | Dequeue Operation in Queue

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.
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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>                              

chevron_right


Output:

After Executing two Dequeue Operations by calling queue1.dequeue() function, the front value changes to 3.

Example 2:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>                        

chevron_right


Output:



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.