Step 3 of 5

60% Complete

Pop Operation

Learn how to remove elements from a stack

The Pop Operation

The pop operation removes and returns the top element from the stack. Along with push, it's one of the fundamental operations that defines a stack's behavior.

Think of it like taking the top plate off a stack of plates. You can only take the plate that's on top, and once you take it, the plate below becomes the new top.

Implementing Pop

In our array-based implementation, the pop operation removes the last element from the array (which represents the top of our stack) and returns it.

Pop Implementation

class Stack {
  constructor() {
    this.items = [];
  }
 
  // Push method...
 
  // Pop: Remove and return the top element from the stack
  pop() {
    // Check if the stack is empty
    if (this.isEmpty()) {
      return null; // Or throw an error
    }
    
    // Remove and return the last element from the array
    return this.items.pop();
  }
 
  isEmpty() {
    return this.items.length === 0;
  }
 
  // Other methods...
}

Before Pop

The stack is empty

Stack with elements: [10, 20, 30, 40]

After Pop()

The stack is empty

Stack with elements: [10, 20, 30], returned: 40

How Pop Works

Let's break down the pop operation step by step:

Check if the stack is empty - Before attempting to remove an element, we check if the stack is empty to avoid errors.
Handle empty stack - If the stack is empty, we return null or throw an error, depending on how we want to handle this edge case.
Remove and return the top element - We use the built-in pop method of JavaScript arrays to remove and return the last element, which is the top of our stack.

Key Points About Pop:

Time Complexity: O(1) - The pop operation is constant time, meaning it takes the same amount of time regardless of how many elements are in the stack.
Empty Stack Handling: Always check if the stack is empty before popping to avoid "stack underflow" errors.
Return Value: The pop operation returns the element that was removed, which is useful when you need to process that element.

Pop Operation in Action

Here's an example of using the pop operation:

Using Pop

// Create a new stack and push some elements
const stack = new Stack();
stack.push(10).push(20).push(30);
 
// Stack contains [10, 20, 30] with 30 at the top
 
// Pop the top element
const topElement = stack.pop();
console.log(topElement); // Output: 30
 
// Stack now contains [10, 20] with 20 at the top
 
// Pop again
const nextElement = stack.pop();
console.log(nextElement); // Output: 20
 
// Stack now contains [10] with 10 at the top
 
// Check if stack is empty before popping
if (!stack.isEmpty()) {
  const lastElement = stack.pop();
  console.log(lastElement); // Output: 10
}
 
// Stack is now empty

The stack is empty

Final empty stack after all pop operations

Common Errors with Pop

When working with the pop operation, be aware of these common pitfalls:

Common Pop Errors:

Stack Underflow: Attempting to pop from an empty stack. Always check if the stack is empty before popping.
Not Storing the Return Value: The pop operation returns the removed element, which you might need. Don't forget to store it if needed.
Popping Without Checking: Always verify the stack isn't empty before popping to avoid runtime errors.

Handling Empty Stack

// Bad practice - might cause errors
const element = stack.pop();
 
// Good practice - check before popping
if (!stack.isEmpty()) {
  const element = stack.pop();
  // Process element
} else {
  console.log("Cannot pop from empty stack");
}

Check Your Understanding

Next Steps

Now that you understand how to remove elements from a stack with the pop operation, let's move on to learning how to view the top element without removing it using the peek operation.