Why Stack Exists and What Problems It Solves in DSA Javascript - Why This Pattern

Mental Model

A stack is a way to keep things in order so you can only add or remove the last thing you put in. It helps solve problems where you need to remember things in reverse order.

Analogy: Think of a stack like a stack of plates: you put plates on top and take plates off the top. You can't take a plate from the middle without removing the ones above it first.

Top -> [Plate3] -> [Plate2] -> [Plate1] -> null
Only the top plate can be taken or added.

Dry Run Walkthrough

Input: Imagine you have tasks: 'A', 'B', 'C' to do in order, but you must finish the last added task first.

Goal: Show how stack helps manage tasks so the last added task is done first (LIFO order).

Step 1: Add task 'A' to the stack

Top -> [A] -> null

Why: We start by putting the first task on the stack.

Step 2: Add task 'B' to the stack

Top -> [B] -> [A] -> null

Why: New tasks go on top, so 'B' is now the first to do.

Step 3: Add task 'C' to the stack

Top -> [C] -> [B] -> [A] -> null

Why: The last task added is on top, ready to be done first.

Step 4: Remove the top task 'C' to do it

Top -> [B] -> [A] -> null

Why: We do the last added task first, so we remove 'C'.

Step 5: Remove the top task 'B' to do it

Top -> [A] -> null

Why: Next, we do 'B' which was added before 'C'.

Step 6: Remove the last task 'A' to do it

Top -> null

Why: Finally, we do the first task 'A' last.

Result:

Top -> null
Tasks done in order: C, B, A

Annotated Code

DSA Javascript

class Stack {
  constructor() {
    this.items = [];
  }

  push(element) {
    this.items.push(element); // add element on top
  }

  pop() {
    if (this.isEmpty()) return null;
    return this.items.pop(); // remove top element
  }

  isEmpty() {
    return this.items.length === 0;
  }

  printStack() {
    return this.items.slice().reverse().join(' -> ') + ' -> null';
  }
}

// Driver code
const stack = new Stack();
stack.push('A');
stack.push('B');
stack.push('C');
console.log('Stack after pushes: ' + stack.printStack());

console.log('Pop:', stack.pop());
console.log('Stack now: ' + stack.printStack());

console.log('Pop:', stack.pop());
console.log('Stack now: ' + stack.printStack());

console.log('Pop:', stack.pop());
console.log('Stack now: ' + stack.printStack());

this.items.push(element); // add element on top

push element on top of stack

if (this.isEmpty()) return null;

check if stack is empty before popping

return this.items.pop(); // remove top element

pop element from top of stack

return this.items.length === 0;

check if stack has no elements

return this.items.slice().reverse().join(' -> ') + ' -> null';

print stack from top to bottom

Output

Stack after pushes: C -> B -> A -> null

Pop: C

Stack now: B -> A -> null

Pop: B

Stack now: A -> null

Pop: A

Stack now: null

Complexity Analysis

Time: O(1) for push and pop because we only add or remove the last element.

Space: O(n) because we store all elements in the stack.

vs Alternative: Compared to arrays where removing from front is slow (O(n)), stack operations are fast (O(1)) because they only work on the top.

Edge Cases

Pop from empty stack

Returns null safely without error

DSA Javascript

if (this.isEmpty()) return null;

When to Use This Pattern

When you need to reverse order or remember things to undo later, use a stack because it lets you access the last added item first.

Common Mistakes

Mistake: Trying to remove items from the bottom or middle of the stack.
Fix: Only remove items from the top using pop to keep stack order.

Summary

Stack stores items so the last added is the first removed (LIFO).

Use it when you need to reverse order or track recent actions.

Remember: you can only add or remove from the top, like a stack of plates.

Practice

1. Why do we use a stack data structure in programming?

easy

A. To store data randomly

B. To store data in a first-in, first-out (FIFO) order

C. To manage data in a last-in, first-out (LIFO) order

D. To sort data automatically

Solution

1. Step 1: Understand stack behavior

   A stack stores data so the last item added is the first one removed, called LIFO.

2. Step 2: Compare with other data structures

   Unlike queues (FIFO), stacks focus on reversing order or tracking recent items.

3. Final Answer:

   To manage data in a last-in, first-out (LIFO) order -> Option C

4. Quick Check:

   Stack = LIFO order [OK]

Hint: Stack means last added is first removed [OK]

Common Mistakes:

• Confusing stack with queue (FIFO)
• Thinking stack sorts data automatically
• Assuming stack stores data randomly

2. Which of the following is the correct way to push an element '5' onto a stack named myStack in JavaScript?

easy

A. myStack.add(5);

B. myStack.push(5);

C. myStack.insert(5);

D. myStack.enqueue(5);

Solution

1. Step 1: Recall JavaScript stack method

   JavaScript arrays use push() to add elements at the end, acting as stack push.

2. Step 2: Check other options

   add(), insert(), and enqueue() are not standard array methods for stack push.

3. Final Answer:

   myStack.push(5); -> Option B

4. Quick Check:

   Push method adds element to stack [OK]

Hint: Use push() to add elements to stack in JS [OK]

Common Mistakes:

• Using enqueue which is for queues
• Using add or insert which are not JS array methods
• Confusing push with pop

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

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

medium

A. 20
[10]

B. 10
[20]

C. 20
[20, 10]

D. 10
[10]

Solution

1. Step 1: Trace push operations

   First, 10 is pushed, stack = [10]. Then 20 is pushed, stack = [10, 20].

2. Step 2: Trace pop operation

   Pop removes last element 20, so popped = 20, stack = [10].

3. Final Answer:

   20 [10] -> Option A

4. Quick Check:

   Pop returns last pushed element [OK]

Hint: Pop returns last pushed element, stack shrinks [OK]

Common Mistakes:

• Thinking pop removes first element
• Confusing push and pop order
• Expecting stack to be empty after pop

4. Identify the error in the following code that tries to implement a stack push operation:

let stack = [];
function pushToStack(element) {
  stack.add(element);
}

medium

A. Function name should be pushStack instead of pushToStack

B. Stack should be declared with const instead of let

C. Missing return statement in function

D. Using add() method which does not exist on arrays

Solution

1. Step 1: Check array methods for adding elements

   JavaScript arrays use push(), not add(), to add elements.

2. Step 2: Verify other options

   Using let is fine; return is not needed for push; function name is valid.

3. Final Answer:

   Using add() method which does not exist on arrays -> Option D

4. Quick Check:

   Use push() to add elements to array [OK]

Hint: Arrays use push(), not add() [OK]

Common Mistakes:

• Using add() instead of push()
• Thinking return is needed for push
• Confusing variable declaration keywords

5. You want to reverse a string using a stack in JavaScript. Which approach correctly uses a stack to reverse the string "hello"?

hard

A. Push each character onto stack, then pop all to build reversed string

B. Push characters in reverse order, then pop to get original string

C. Use stack to sort characters alphabetically

D. Push only vowels onto stack, then pop to reverse string

Solution

1. Step 1: Understand stack reversal logic

   Pushing characters in original order and popping reverses their order, reversing the string.

2. Step 2: Evaluate other options

   Push characters in reverse order, then pop to get original string reverses twice, giving original string; A sorts, not reverses; D only reverses vowels, not full string.

3. Final Answer:

   Push each character onto stack, then pop all to build reversed string -> Option A

4. Quick Check:

   Stack reverses order by LIFO [OK]

Hint: Push original order, pop to reverse [OK]

Common Mistakes:

• Pushing characters in reverse order first
• Using stack to sort instead of reverse
• Only pushing vowels instead of all characters