Open In App

p5.js | Pop Operation in Stack

Improve
Improve
Like Article
Like
Save
Share
Report

The stack is a linear data structure which follows a particular order in which the operations are performed. The order may be LIFO(Last In First Out) or FILO(First In Last Out).
stack

Pop Operation on Stacks: Accessing the content while removing it from the top of the stack, is known as a Pop Operation. In an array implementation of pop() operation, the data element is not actually removed, instead top is decremented to a lower position in the stack to point to the next value. But in linked-list implementation, pop() actually removes data element and deallocates memory space.

Approach: A pop() operation may involve the following steps:

  • Check if the stack is empty or not.
  • If the stack is empty, produces an error and exit.
  • If the stack is not empty, accesses the data element at which top is pointing.
  • Delete the element, using array.pop() operation on buffer.
  • Return success.

Example 1: This example describes only push operation on stack.




<!DOCTYPE html>
<html>
  
<head>
    <title>Stack Data Structure</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 Stack function 
        function Stack(array) {
            this.array = [];
            if (array) this.array = array;
        }
          
        // Add Get Buffer property to object
        // constructor which slices the array
        Stack.prototype.getBuffer = function() {
            return this.array.slice();
        }
          
        // Add isEmpty properties to object
        // constructor which returns the
        // length of the array
        Stack.prototype.isEmpty = function() {
            return this.array.length == 0;
        }
          
        // Instance of the stack class
        var stack1 = new Stack(); //Stack { array: [] }
          
        // Add Push property to object constructor
        // which push elements to the array
        Stack.prototype.push = 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);
              
            // Set stroke color
            stroke('black');
            line(10, 45, 90, 45);
            rect(10, 30, 40, 30);
            noStroke();
            text("TOP", 20, 50);
              
            // Display stack 
            for(var i = stack1['array'].length-1; i >= 0; i--) {
                var p = 10;
                translate(70, 0);
                strokeWeight(3);
                stroke('black');
                line(10+p, 45, p+80, 45);
                noStroke();
                rect(10+p, 30, 40+p, 30);
                text(stack1['array'][i], 40, 50);
                p += 10;
            }
              
            textSize(16);
            text("Current Top : " + stack1.peek(), 0, 130); 
            textSize(13);
        }
          
        // Peek Function
        Stack.prototype.peek = function() {
            return this.array[this.array.length-1];
        }
          
        // Call to push operation
        stack1.push(1);
        stack1.push(2);
        stack1.push(3);
        stack1.push(19);
        stack1.push(11);
        stack1.push(12);
    </script>
</body>
  
</html>                         


Output:

Example 2: This example uses two Pop operations after pushing the element in the stack by calling stack1.pop() function.




<!DOCTYPE html>
<html>
  
<head>
    <title>Stack Data Structure</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 Stack function 
        function Stack(array) {
            this.array = [];
            if (array) this.array = array;
        }
          
        // Add Get Buffer property to object
        // constructor which slices the array
        Stack.prototype.getBuffer = function() {
            return this.array.slice();
        }
          
        // Add isEmpty properties to object
        // constructor which returns the
        // length of the array
        Stack.prototype.isEmpty = function() {
            return this.array.length == 0;
        }
          
        // Instance of the stack class
        var stack1 = new Stack(); //Stack { array: [] }
          
        // Add Push property to object constructor
        // which push elements to the array
        Stack.prototype.push = 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);
              
            // Set stroke color
            stroke('black');
            line(10, 45, 90, 45);
            rect(10, 30, 40, 30);
            noStroke();
            text("TOP", 20, 50);
              
            // Display stack 
            for(var i = stack1['array'].length-1; i >= 0; i--) {
                var p = 10;
                translate(70, 0);
                strokeWeight(3);
                stroke('black');
                line(10+p, 45, p+80, 45);
                noStroke();
                rect(10+p, 30, 40+p, 30);
                text(stack1['array'][i], 40, 50);
                p += 10;
            }
              
            textSize(16);
            text("Current Top : " + stack1.peek(), 0, 130); 
            textSize(13);
        }
          
        // Peek Function
        Stack.prototype.peek = function() {
            return this.array[this.array.length-1];
        }
          
        // Pop operation
        Stack.prototype.pop = function() {
            return this.array.pop();
        }
          
        // Call to push operation
        stack1.push(1);
        stack1.push(2);
        stack1.push(3);
        stack1.push(19);
        stack1.push(11);
        stack1.push(12);
          
        // Call to pop operation
        stack1.pop();
        stack1.pop();
    </script>
</body>
  
</html>                        


Output:



Last Updated : 09 Jul, 2019
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads