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