Tuesday, November 25, 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

1 COMMENT

Most Popular

Dominic
32412 POSTS0 COMMENTS
Milvus
97 POSTS0 COMMENTS
Nango Kala
6790 POSTS0 COMMENTS
Nicole Veronica
11934 POSTS0 COMMENTS
Nokonwaba Nkukhwana
12000 POSTS0 COMMENTS
Shaida Kate Naidoo
6910 POSTS0 COMMENTS
Ted Musemwa
7169 POSTS0 COMMENTS
Thapelo Manthata
6868 POSTS0 COMMENTS
Umr Jansen
6856 POSTS0 COMMENTS