Thursday, October 23, 2025
HomeLanguagesJavascriptp5.js | Pop Operation in Stack

p5.js | Pop Operation in Stack

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:

RELATED ARTICLES

Most Popular

Dominic
32361 POSTS0 COMMENTS
Milvus
88 POSTS0 COMMENTS
Nango Kala
6728 POSTS0 COMMENTS
Nicole Veronica
11892 POSTS0 COMMENTS
Nokonwaba Nkukhwana
11954 POSTS0 COMMENTS
Shaida Kate Naidoo
6852 POSTS0 COMMENTS
Ted Musemwa
7113 POSTS0 COMMENTS
Thapelo Manthata
6805 POSTS0 COMMENTS
Umr Jansen
6801 POSTS0 COMMENTS