Stack Implementation Using Array in DSA Javascript - Execution Trace

Concept Flow - Stack Implementation Using Array

Start

↓

Initialize empty array

↓

Push operation?

Yes→Add element at array end

↓

Update top pointer

↓

Pop operation?

Yes→Remove element from array end

↓

Update top pointer

↓

Peek operation?

Yes→Return element at array end

↓

Return top element

↓

IsEmpty operation?

Yes→Check if array length is 0

↓

Return true/false

↓

End

This flow shows how a stack uses an array to add (push), remove (pop), peek, and check if empty by working with the array's end.

Execution Sample

DSA Javascript

let stack = [];
stack.push(10);
stack.push(20);
stack.pop();
stack.push(30);
console.log(stack);

This code adds 10 and 20 to the stack, removes the top (20), adds 30, then prints the stack.

Execution Table

Step	Operation	Array State	Top Element	Action Description
1	Initialize stack	[]	None	Start with empty array
2	Push 10	[10]	10	Add 10 at end, top is now 10
3	Push 20	[10, 20]	20	Add 20 at end, top is now 20
4	Pop	[10]	10	Remove last element (20), top is now 10
5	Push 30	[10, 30]	30	Add 30 at end, top is now 30
6	Print stack	[10, 30]	30	Final stack printed

💡 All operations done, stack contains [10, 30]

Variable Tracker

Variable	Start	After Step 2	After Step 3	After Step 4	After Step 5	Final
stack	[]	[10]	[10, 20]	[10]	[10, 30]	[10, 30]
top element	None	10	20	10	30	30

Key Moments - 3 Insights

Why does pop remove the last element and not the first?

Because stack follows Last-In-First-Out (LIFO), pop removes the most recently added element at the array's end, as shown in step 4 of the execution_table.

What happens if we pop from an empty stack?

Popping from an empty array returns undefined or error depending on implementation. Here, since stack is empty at start (step 1), pop would have no element to remove.

How do we know the top element after each operation?

The top element is always the last element in the array, updated after push or pop as tracked in the variable_tracker.

Visual Quiz - 3 Questions

Look at the execution_table, what is the stack array after step 3?

A [20]

B [10]

C [10, 20]

D []

💡 Hint

Check the 'Array State' column for step 3 in execution_table.

At which step does the top element become 10 after being 20?

A Step 4

B Step 2

C Step 3

D Step 5

💡 Hint

Look at the 'Top Element' column in execution_table to see when it changes from 20 to 10.

If we add stack.push(40) after step 5, what will be the new top element?

A 30

B 40

C 10

D Undefined

💡 Hint

Pushing adds element at end, so top element updates to the new pushed value.

Concept Snapshot

Stack using array:
- Use array to store elements
- push() adds element at end (top)
- pop() removes element from end (top)
- peek() reads last element
- isEmpty() checks if array length is 0
- Follows Last-In-First-Out (LIFO) principle

Full Transcript

This visualization shows how a stack works using an array. We start with an empty array. Each push adds an element at the end, making it the top. Each pop removes the last element, removing the top. The top element is always the last in the array. The stack follows Last-In-First-Out, meaning the last added element is the first removed. The execution table tracks each step's array state and top element. Key moments clarify why pop removes the last element, what happens if popping empty, and how top updates. The quiz tests understanding of array states and top element changes. The snapshot summarizes stack operations using an array.

Practice

1. What is the main characteristic of a stack data structure implemented using an array?

easy

A. Sorted Order

B. Last In, First Out (LIFO)

C. Random Access

D. First In, First Out (FIFO)

Solution

1. Step 1: Understand stack behavior

   A stack adds and removes elements from the same end, so the last element added is the first to be removed.

2. Step 2: Identify the correct term

   This behavior is called Last In, First Out (LIFO).

3. Final Answer:

   Last In, First Out (LIFO) -> Option B

4. Quick Check:

   Stack = LIFO [OK]

Hint: Stack always removes the last added item first [OK]

Common Mistakes:

• Confusing stack with queue (FIFO)
• Thinking stack allows random access
• Assuming stack keeps elements sorted

2. Which of the following is the correct way to add an element to a stack implemented as an array in JavaScript?

easy

A. stack.push(element);

B. stack.pop(element);

C. stack.shift(element);

D. stack.unshift(element);

Solution

1. Step 1: Identify method to add element at the end

   In JavaScript arrays, push() adds an element to the end of the array.

2. Step 2: Confirm stack push operation

   Stack push means adding element on top, which corresponds to array's end, so push() is correct.

3. Final Answer:

   stack.push(element); -> Option A

4. Quick Check:

   Use push() to add element to stack [OK]

Hint: Use push() to add on top of stack [OK]

Common Mistakes:

• Using pop() which removes element
• Using shift() or unshift() which affect start of array

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

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

medium

A. [10, 20, 30]

B. [30]

C. [20, 30]

D. [10, 30]

Solution

1. Step 1: Trace push and pop operations

   Initially stack = [] push(10) -> [10] push(20) -> [10, 20] pop() removes last element 20 -> [10] push(30) -> [10, 30]

2. Step 2: Check final stack state

   After all operations, stack contains [10, 30].

3. Final Answer:

   [10, 30] -> Option D

4. Quick Check:

   Push and pop update stack correctly [OK]

Hint: Pop removes last pushed, push adds at end [OK]

Common Mistakes:

• Assuming pop removes first element
• Confusing order of elements after pop

4. Identify the error in the following stack implementation code and select the correct fix:

class Stack {
  constructor() {
    this.items = [];
  }
  push(element) {
    this.items.unshift(element);
  }
  pop() {
    return this.items.pop();
  }
}

medium

A. Use push() instead of unshift() in push method

B. Use shift() instead of pop() in pop method

C. No error, code is correct

D. Use pop() instead of push() in push method

Solution

1. Step 1: Analyze push method

   push uses unshift which adds element at start of array.

2. Step 2: Analyze pop method

   pop removes element from end of array. This causes mismatch because push adds at start but pop removes from end.

3. Step 3: Fix mismatch

   To maintain stack behavior, push should add at end using push(), so pop removes last added element correctly.

4. Final Answer:

   Use push() instead of unshift() in push method -> Option A

5. Quick Check:

   push() and pop() must match ends [OK]

Hint: Push and pop must operate on same array end [OK]

Common Mistakes:

• Mixing unshift with pop causes wrong stack order
• Thinking shift() and pop() are interchangeable
• Ignoring array end consistency

5. You want to implement a stack using an array that also tracks the maximum element at any time efficiently. Which approach is best?

hard

A. Scan entire array to find max after each pop

B. Sort the array after each push to find max

C. Use two stacks: one for elements, one for max values

D. Store max element only in a variable updated on push

Solution

1. Step 1: Understand max tracking challenge

   Finding max after each operation must be efficient, not scanning entire array.

2. Step 2: Evaluate options

   Sorting after each push is costly. Scanning array after pop is slow. Storing max in variable fails if max is popped.

3. Step 3: Use two stacks approach

   One stack stores elements, second stack stores current max at each push. This allows O(1) max retrieval.

4. Final Answer:

   Use two stacks: one for elements, one for max values -> Option C

5. Quick Check:

   Two stacks track max efficiently [OK]

Hint: Use auxiliary stack to track max values [OK]

Common Mistakes:

• Sorting array each time is inefficient
• Single variable max fails when max is popped
• Scanning array after pop is slow