Pop Operation on Stack in DSA Typescript

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 top book first before taking any below it.

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

Dry Run Walkthrough

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

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

Step 1: Check if stack is empty

3 -> 2 -> 1 -> null

Why: We must ensure there is something to pop

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

3 -> 2 -> 1 -> null ↑top

Why: We need to return the popped value

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

2 -> 1 -> null ↑top

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

Step 4: Return saved element (3)

2 -> 1 -> null

Why: Pop returns the removed top element

Result:

2 -> 1 -> null
Popped element: 3

Annotated Code

DSA Typescript

class Node {
  value: number;
  next: Node | null;
  constructor(value: number) {
    this.value = value;
    this.next = null;
  }
}

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

  push(value: number): void {
    const newNode = new Node(value);
    newNode.next = this.top;
    this.top = newNode;
  }

  pop(): number | null {
    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
  }

  printStack(): void {
    let curr = this.top;
    let output = '';
    while (curr !== null) {
      output += curr.value + ' -> ';
      curr = curr.next;
    }
    output += 'null';
    console.log(output);
  }
}

// Driver code
const stack = new Stack();
stack.push(1);
stack.push(2);
stack.push(3);
stack.printStack();
const popped = stack.pop();
stack.printStack();
console.log('Popped element:', popped);

if (this.top === null) {

check if stack is empty to avoid errors

const poppedValue = this.top.value;

save the top element's value to return later

this.top = this.top.next;

move top pointer down to remove the top element

return poppedValue;

return the removed top element

Output

3 -> 2 -> 1 -> null

2 -> 1 -> null

Popped element: 3

Complexity Analysis

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

Space: O(1) because no extra space is needed besides a temporary variable

vs Alternative: Compared to arrays where pop might require resizing, linked stack pop is always O(1) and efficient

Edge Cases

empty stack

pop returns null indicating no element to remove

DSA Typescript

if (this.top === null) {

stack with one element

pop removes the only element and stack becomes empty

DSA Typescript

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 efficiently removes the top element.

Common Mistakes

Mistake: Not checking if the stack is empty before popping
Fix: Add a condition to return null or handle empty stack before removing top

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 recently added item first.

The key is to move the top pointer down to the next element to remove the current top.

Practice

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

easy

A. Clears all elements from the stack

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

C. Returns the bottom element without removing it

D. Removes and returns the top element of 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 this top element from the stack.

3. Final Answer:

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

4. Quick Check:

   pop() removes top element = A [OK]

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

Common Mistakes:

• Thinking pop adds elements
• Confusing pop with peek
• Assuming pop removes bottom element

2. Which of the following is the correct TypeScript syntax to pop an element from a stack array named stack?

easy

A. pop(stack);

B. stack.remove();

C. stack.pop();

D. stack.delete();

Solution

1. Step 1: Recall array pop method in TypeScript

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

2. Step 2: Match correct syntax

   The correct syntax to pop from stack is stack.pop();. Other options are invalid methods.

3. Final Answer:

   stack.pop(); -> Option C

4. Quick Check:

   Array pop method = stack.pop() [OK]

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

Common Mistakes:

• Using non-existent methods like remove() or delete()
• Calling pop as a function with stack as argument
• Confusing pop with other array methods

3. What will be the output after executing the following TypeScript code?

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

medium

A. 30
[10, 20]

B. 20
[10, 20, 30]

C. 30
[10, 20, 30]

D. undefined
[10, 20]

Solution

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

   pop() removes and returns the last element. Here, 30 is removed and returned.

2. Step 2: Check console outputs

   First console.log prints popped value 30. Second prints updated stack [10, 20].

3. Final Answer:

   30 [10, 20] -> Option A

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
• Thinking pop() does not modify the array
• Confusing pop() return value with stack after pop

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

const stack: number[] = [];
const popped = stack.pop();
console.log(popped);

medium

A. pop() returns undefined when stack is empty, no error

B. Runtime error because pop() on empty array is invalid

C. Syntax error due to missing type annotation

D. pop() removes first element instead of last

Solution

1. Step 1: Check pop() behavior on empty array

   pop() returns undefined if the array is empty; it does not throw an error.

2. Step 2: Verify code correctness

   Code runs without error and prints undefined.

3. Final Answer:

   pop() returns undefined when stack is empty, no error -> Option A

4. Quick Check:

   pop() on empty array = undefined [OK]

Hint: pop() returns undefined if stack is empty, no crash [OK]

Common Mistakes:

• Expecting runtime error on empty pop()
• Confusing pop() with shift() behavior
• Thinking pop() removes first element

5. Given a stack implemented as an array stack = [5, 10, 15, 20], write a TypeScript function popTwo that pops two elements and returns them as an array. What will be the returned value and the stack after calling popTwo(stack)?

hard

A. [15, 20], stack = [5, 10]

B. [20, 15], stack = [5, 10]

C. [20, 15], stack = [10, 5]

D. [10, 5], stack = [15, 20]

Solution

1. Step 1: Understand pop() order and stack state

   pop() removes last element first. First pop returns 20, second pop returns 15.

2. Step 2: Determine returned array and stack after two pops

   Returned array is [20, 15]. Stack after pops is [5, 10].

3. Final Answer:

   [20, 15], stack = [5, 10] -> Option B

4. Quick Check:

   Two pops remove last two elements in order [20, 15] [OK]

Hint: Pop twice returns last two elements in reverse order [OK]

Common Mistakes:

• Returning popped elements in wrong order
• Assuming stack order changes after pop
• Mixing up stack contents after pops