Stack Concept and LIFO Principle in DSA Typescript - Build from Scratch

Stack Concept and LIFO Principle

📖 Scenario: Imagine you are managing a stack of books on a table. You can only add or remove the top book. This is how a stack data structure works using the Last In, First Out (LIFO) principle.

🎯 Goal: You will create a stack using an array, add books to it, remove the top book, and then display the current stack.

📋 What You'll Learn

Create an array called stack with initial books

Create a variable called newBook to add to the stack

Add newBook to the top of the stack

Remove the top book from the stack

Print the current state of the stack

💡 Why This Matters

🌍 Real World

Stacks are used in real life when you pile plates or books where you only take the top one first.

💼 Career

Understanding stacks is important for programming tasks like undo features, expression evaluation, and managing function calls.

1

Create the initial stack

Create an array called stack with these exact books in order: 'Book1', 'Book2', 'Book3'

DSA Typescript

// Create the stack array with 'Book1', 'Book2', 'Book3'
// Your code here

Hint

Use square brackets to create an array and include the books in the given order.

2

Add a new book to the stack

Create a variable called newBook and set it to 'Book4'

DSA Typescript

const stack = ['Book1', 'Book2', 'Book3'];
// Create a variable newBook and set it to 'Book4'
// Your code here

Hint

Use const newBook = 'Book4'; to create the variable.

3

Push the new book onto the stack and pop the top book

Use stack.push(newBook) to add newBook to the top of stack. Then use stack.pop() to remove the top book from stack

DSA Typescript

const stack = ['Book1', 'Book2', 'Book3'];
const newBook = 'Book4';
// Add newBook to stack and then remove the top book
// Your code here

Hint

Use push to add and pop to remove the last item.

4

Print the current stack

Use console.log(stack) to print the current state of the stack

DSA Typescript

const stack = ['Book1', 'Book2', 'Book3'];
const newBook = 'Book4';
stack.push(newBook);
stack.pop();
// Print the stack
// Your code here

Hint

The stack should show the original three books after adding and removing the top book.

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