Stack Concept and LIFO Principle in DSA Typescript - Execution Trace

Concept Flow - Stack Concept and LIFO Principle

Start with empty stack

↓

Push element

→Add element on top

↓

Push more elements

→Add each new element on top

↓

Pop element

→Remove top element

↓

Repeat push/pop as needed

↓

Stack empty?

Yes→Stop

No↓

Continue operations

Stack works by adding elements on top and removing from top, following Last In First Out order.

Execution Sample

DSA Typescript

let stack = [];
stack.push(1);
stack.push(2);
stack.push(3);
stack.pop();
stack.push(4);

This code adds 1, 2, 3 to stack, removes top (3), then adds 4 on top.

Execution Table

Step	Operation	Nodes in Stack	Pointer Changes	Visual State
1	Initialize empty stack	[]	head = null	null
2	Push 1	[1]	head -> 1	1 -> null
3	Push 2	[2,1]	head -> 2	2 -> 1 -> null
4	Push 3	[3,2,1]	head -> 3	3 -> 2 -> 1 -> null
5	Pop top (3)	[2,1]	head -> 2	2 -> 1 -> null
6	Push 4	[4,2,1]	head -> 4	4 -> 2 -> 1 -> null

💡 Operations stop after last push; stack has elements [4,2,1] with 4 on top.

Variable Tracker

Variable	Start	After 1	After 2	After 3	After 4	After 5	Final
stack	[]	[1]	[2,1]	[3,2,1]	[2,1]	[4,2,1]	[4,2,1]
head (top)	null	1	2	3	2	4	4

Key Moments - 3 Insights

Why does pop remove the last pushed element, not the first?

Because stack follows LIFO: last element pushed is on top and removed first, as shown in step 5 where 3 is popped after pushing 1,2,3.

What happens to the stack pointer (head) after pop?

The head moves to the next element below the popped one, as in step 5 head moves from 3 to 2, updating the top.

Why do new elements go on top, not bottom?

Stack adds new elements on top to maintain LIFO order, shown in steps 3 and 6 where new pushes update head to new element.

Visual Quiz - 3 Questions

Look at the execution table, what is the stack state after step 4?

A [4,2,1]

B [2,1]

C [3,2,1]

D [1]

💡 Hint

Check the 'Nodes in Stack' column at step 4 in the execution table.

At which step does the head pointer move from 3 to 2?

A Step 5

B Step 3

C Step 4

D Step 6

💡 Hint

Look at 'Pointer Changes' column to see when head changes from 3 to 2.

If we pop again after step 6, what will be the new top of the stack?

A 1

B 2

C 4

D null

💡 Hint

After popping top (4), head moves to next element below, check variable_tracker for stack after step 6.

Concept Snapshot

Stack stores elements in order.
Push adds element on top.
Pop removes element from top.
Follows Last In First Out (LIFO).
Top pointer always points to last pushed element.
Empty stack has no top (null).

Full Transcript

A stack is a data structure where elements are added and removed from the top only. This follows the Last In First Out principle, meaning the last element added is the first to be removed. We start with an empty stack. When we push elements like 1, 2, and 3, each new element goes on top. When we pop, the top element is removed and the pointer moves down. This is shown step-by-step in the execution table. The variable tracker shows how the stack and top pointer change after each operation. Understanding these steps helps avoid confusion about why the last pushed element is removed first and how the top pointer updates. The visual quiz tests your understanding of these changes at each step.

Practice

1. What does the LIFO principle mean in the context of a stack?

easy

A. Last In, First Out - the last element added is the first to be removed

B. Last In, First Out - the first element added is the first to be removed

C. First In, First Out - the first element added is the first to be removed

D. First In, Last Out - the first element added is the last to be removed

Solution

1. Step 1: Understand LIFO meaning

   LIFO means the last element added to the stack is the first one to be removed.

2. Step 2: Match with options

   Last In, First Out - the last element added is the first to be removed correctly describes this behavior as "Last In, First Out".

3. Final Answer:

   Last In, First Out - the last element added is the first to be removed -> Option A

4. Quick Check:

   LIFO = Last In, First Out [OK]

Hint: Remember stack removes newest item first [OK]

Common Mistakes:

• Confusing LIFO with FIFO
• Thinking first added is removed first
• Mixing up the order of insertion and removal

2. Which of the following is the correct TypeScript syntax to push an element `5` onto a stack array named stack?

easy

A. stack.push(5);

B. stack.add(5);

C. stack.insert(5);

D. stack.append(5);

Solution

1. Step 1: Recall array method to add element at end

   In TypeScript, the method to add an element at the end of an array is push().

2. Step 2: Verify options

   Only stack.push(5); uses push(5), which is correct syntax to add 5 to the stack.

3. Final Answer:

   stack.push(5); -> Option A

4. Quick Check:

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

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

Common Mistakes:

• Using non-existent methods like add or insert
• Confusing push with append (not in JS/TS)
• Syntax errors like missing parentheses

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

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

medium

A. [10, 20, 30]

B. [20, 30]

C. [10, 20]

D. [30]

Solution

1. Step 1: Trace push operations

   Elements 10, 20, and 30 are pushed in order, so stack becomes [10, 20, 30].

2. Step 2: Trace pop operation

   Pop removes the last element (30), so stack becomes [10, 20].

3. Final Answer:

   [10, 20] -> Option C

4. Quick Check:

   Pop removes last item, stack left with [10, 20] [OK]

Hint: Pop removes last pushed element [OK]

Common Mistakes:

• Thinking pop removes first element
• Confusing push and pop effects
• Expecting stack unchanged after pop

4. Identify the error in the following TypeScript stack code:

const stack: number[] = [];
stack.push(1);
stack.push(2);
const removed = stack.pop;
console.log(removed);

medium

A. console.log syntax is wrong

B. stack array is not initialized

C. push method is used incorrectly

D. pop method is not called with parentheses

Solution

1. Step 1: Check pop usage

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

2. Step 2: Correct usage

   To pop and get the value, it should be stack.pop() with parentheses to call the method.

3. Final Answer:

   pop method is not called with parentheses -> Option D

4. Quick Check:

   Call pop() with () to execute [OK]

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

Common Mistakes:

• Forgetting parentheses on pop()
• Confusing method reference with method call
• Assuming pop returns function instead of value

5. Given a stack implemented as an array, which sequence of operations will result in the stack containing [1, 2, 3] after all operations?

Choose the correct sequence:
A) push(1), push(2), pop(), push(3), push(2)
B) push(1), pop(), push(2), push(3), push(1)
C) push(3), push(2), push(1), pop(), push(1)
D) push(1), push(2), push(3), pop(), push(3)

hard

A. push(1), push(2), pop(), push(3), push(2)

B. push(1), push(2), push(3), pop(), push(3)

C. push(3), push(2), push(1), pop(), push(1)

D. push(1), pop(), push(2), push(3), push(1)

Solution

1. Step 1: Trace push(1), push(2), push(3), pop(), push(3) operations

   Start with empty stack []:
   push(1) -> [1]
   push(2) -> [1, 2]
   push(3) -> [1, 2, 3]
   pop() removes 3 -> [1, 2]
   push(3) -> [1, 2, 3]

2. Step 2: Verify final stack

   After these operations, stack is [1, 2, 3], matching the target.

3. Final Answer:

   push(1), push(2), push(3), pop(), push(3) -> Option B

4. Quick Check:

   Pop removes last, push adds correct element [OK]

Hint: Trace each push/pop step carefully [OK]

Common Mistakes:

• Not tracking pop effect correctly
• Assuming pop removes first element
• Mixing order of pushes and pops