Pop Operation on Stack in DSA Javascript

Mental Model

A stack is like a pile of plates where you only take the top plate off. Pop removes the top item from the stack.

Analogy: Imagine a stack of books on a table. You can only remove the book on the top, not the ones below it.

Top -> [ 3 ] -> [ 2 ] -> [ 1 ] -> null
          ↑

Dry Run Walkthrough

Input: stack: 1 -> 2 -> 3 -> null, pop operation

Goal: Remove the top element (3) from the stack and return it

Step 1: Check if stack is empty

Top -> [ 3 ] -> [ 2 ] -> [ 1 ] -> null
          ↑

Why: We must ensure there is something to pop

Step 2: Save the top element value (3) to return later

Top -> [ 3 ] -> [ 2 ] -> [ 1 ] -> null
          ↑

Why: We need to remember what we are removing

Step 3: Move top pointer to next element (2)

Top -> [ 2 ] -> [ 1 ] -> null
          ↑

Why: Removing the top means the next element becomes the new top

Step 4: Return the saved value (3)

Top -> [ 2 ] -> [ 1 ] -> null
          ↑

Why: Pop returns the removed top element

Result:

Top -> [ 2 ] -> [ 1 ] -> null
Pop returned: 3

Annotated Code

DSA Javascript

class StackNode {
  constructor(value) {
    this.value = value;
    this.next = null;
  }
}

class Stack {
  constructor() {
    this.top = null;
  }

  push(value) {
    const newNode = new StackNode(value);
    newNode.next = this.top;
    this.top = newNode;
  }

  pop() {
    if (this.top === null) {
      return null; // stack empty
    }
    const poppedValue = this.top.value; // save top value
    this.top = this.top.next; // move top down
    return poppedValue; // return popped value
  }

  print() {
    let curr = this.top;
    let result = '';
    while (curr !== null) {
      result += curr.value + ' -> ';
      curr = curr.next;
    }
    result += 'null';
    console.log(result);
  }
}

// Driver code
const stack = new Stack();
stack.push(1);
stack.push(2);
stack.push(3);
stack.print();
const popped = stack.pop();
stack.print();
console.log('Pop returned:', popped);

if (this.top === null) {

check if stack is empty to avoid errors

const poppedValue = this.top.value;

save the top element's value before removing

this.top = this.top.next;

move top pointer down to remove the top element

return poppedValue;

return the removed element's value

Output

3 -> 2 -> 1 -> null

2 -> 1 -> null

Pop returned: 3

Complexity Analysis

Time: O(1) because pop removes the top element directly without traversal

Space: O(1) because no extra space is used during pop

vs Alternative: Compared to arrays where pop might be O(1) but shifting elements for other operations can be costly, linked stack pop is always O(1)

Edge Cases

empty stack

pop returns null safely without error

DSA Javascript

if (this.top === null) {

stack with one element

pop removes the only element and top becomes null

DSA Javascript

this.top = this.top.next;

When to Use This Pattern

When you see a problem needing last-in-first-out removal, reach for the stack pop operation because it removes the most recent item efficiently.

Common Mistakes

Mistake: Not checking if the stack is empty before popping
Fix: Add a check for empty stack (top === null) to avoid errors

Mistake: Not updating the top pointer after pop
Fix: Set top to top.next to remove the top element properly

Summary

Pop removes and returns the top element from the stack.

Use pop when you need to remove the most recent item added.

The key is to move the top pointer down and return the removed value.

Practice

1. What does the pop() operation do in a stack?

easy

A. Removes and returns the top element of the stack

B. Adds a new element to the bottom of the stack

C. Returns the bottom element without removing it

D. Clears all elements from the stack

Solution

1. Step 1: Understand stack behavior

   A stack follows Last In First Out (LIFO) principle, so the last added element is on top.

2. Step 2: Define pop operation

   The pop operation removes and returns the top element of the stack, following LIFO.

3. Final Answer:

   Removes and returns the top element of the stack -> Option A

4. Quick Check:

   pop() = remove top element [OK]

Hint: Pop always removes the last added item [OK]

Common Mistakes:

• Thinking pop adds elements
• Confusing pop with peek (which only returns)
• Assuming pop removes bottom element

2. Which of the following is the correct syntax to pop an element from a stack implemented as an array in JavaScript?

easy

A. pop(stack);

B. stack.popElement();

C. stack.pop();

D. stack.remove();

Solution

1. Step 1: Recall JavaScript array pop method

   JavaScript arrays have a built-in method pop() to remove the last element.

2. Step 2: Match correct syntax

   The correct syntax to pop from an array named stack is stack.pop();

3. Final Answer:

   stack.pop(); -> Option C

4. Quick Check:

   Use array.pop() to remove last element [OK]

Hint: Use array.pop() to remove top stack element [OK]

Common Mistakes:

• Using non-existent methods like popElement()
• Calling pop as a standalone function
• Using remove() which is not valid for arrays

3. What will be the output of the following code?

const stack = [10, 20, 30];
const popped = stack.pop();
console.log(popped);
console.log(stack);

medium

A. 20
[10, 20, 30]

B. undefined
[10, 20]

C. 30
[10, 20, 30]

D. 30
[10, 20]

Solution

1. Step 1: Understand pop() effect on array

   pop() removes the last element (30) and returns it, so popped is 30.

2. Step 2: Check stack after pop

   After pop, stack becomes [10, 20] because 30 is removed.

3. Final Answer:

   30 [10, 20] -> Option D

4. Quick Check:

   pop() returns last element and removes it [OK]

Hint: pop() returns last item and removes it from array [OK]

Common Mistakes:

• Expecting pop() to return second last element
• Assuming stack remains unchanged after pop
• Confusing pop() return value with stack content

4. Identify the error in the following code snippet that tries to pop an element from a stack:

let stack = [1, 2, 3];
let popped = stack.pop;
console.log(popped);

medium

A. pop is not a function

B. pop method is not called, missing parentheses

C. stack is not defined

D. pop returns undefined always

Solution

1. Step 1: Check how pop is used

   The code assigns stack.pop without parentheses, so it assigns the function itself, not the result.

2. Step 2: Correct usage of pop

   To pop and get the value, pop must be called with parentheses: stack.pop().

3. Final Answer:

   pop method is not called, missing parentheses -> Option B

4. Quick Check:

   Use stack.pop() to call pop method [OK]

Hint: Always use parentheses to call pop() method [OK]

Common Mistakes:

• Forgetting parentheses when calling pop
• Thinking pop is a property, not a function
• Assuming pop returns undefined without call

5. Given a stack implemented as an array stack = [5, 10, 15], what will be the state of the stack after performing two consecutive pop() operations?

hard

A. [5]

B. [10]

C. [5, 10]

D. []

Solution

1. Step 1: Perform first pop()

   First pop removes 15, stack becomes [5, 10].

2. Step 2: Perform second pop()

   Second pop removes 10, stack becomes [5].

3. Final Answer:

   [5] -> Option A

4. Quick Check:

   Two pops remove last two elements [OK]

Hint: Each pop removes one top element [OK]

Common Mistakes:

• Removing elements from the bottom instead of top
• Assuming pop does not change stack
• Confusing number of pops with elements removed