Queue vs Stack When to Use Which in DSA Typescript - Visual Comparison

Concept Flow - Queue vs Stack When to Use Which

Start Operation

↓

Is order First-In-First-Out?

Yes No↓

Use Queue

↓

Use Stack

Decide data structure based on order needed: FIFO means Queue, LIFO means Stack.

Execution Sample

DSA Typescript

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

const queue: number[] = [];
queue.push(1);
queue.push(2);
const first = queue.shift();
console.log(queue);

Shows pushing and popping from stack (LIFO) and enqueueing and dequeueing from queue (FIFO).

Execution Table

Step	Operation	Data Structure	Pointer Changes	Visual State
1	Push 1	Stack	Top points to 1	[1]
2	Push 2	Stack	Top points to 2	[1, 2]
3	Pop	Stack	Top moves from 2 to 1	[1]
4	Push 1	Queue	Rear points to 1	[1]
5	Push 2	Queue	Rear points to 2	[1, 2]
6	Shift (dequeue)	Queue	Front moves from 1 to 2	[2]
7	End	-	-	Stack: [1], Queue: [2]

💡 Operations stop after demonstrating push/pop for stack and push/shift for queue.

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	After Step 4	After Step 5	After Step 6	Final
stack	[]	[1]	[1, 2]	[1]	[1]	[1]	[1]	[1]
queue	[]	[]	[]	[]	[1]	[1, 2]	[2]	[2]
stack top	null	1	2	1	1	1	1	1
queue front	null	null	null	null	1	1	2	2
queue rear	null	null	null	null	1	2	2	2

Key Moments - 3 Insights

Why does popping from the stack remove the last pushed item?

Because stack follows Last-In-First-Out (LIFO), so the last pushed item is always on top and removed first, as shown in execution_table step 3.

Why does shifting from the queue remove the first pushed item?

Queue follows First-In-First-Out (FIFO), so the first pushed item is at the front and removed first, as shown in execution_table step 6.

What happens if we try to pop from an empty stack or shift from an empty queue?

Both operations would return undefined or error because there is no element to remove; this is not shown in the table but is important to handle in real code.

Visual Quiz - 3 Questions

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

A []

B [1, 2]

C [1]

D [2]

💡 Hint

Check the Visual State column at step 3 in execution_table.

At which step does the queue remove its first element?

A Step 4

B Step 6

C Step 5

D Step 7

💡 Hint

Look for 'Shift (dequeue)' operation in execution_table.

If we push 3 to the stack after step 3, what will be the new top element?

A 3

B 2

C 1

D undefined

💡 Hint

Stack push adds element on top; see variable_tracker for stack top changes.

Concept Snapshot

Queue vs Stack Quick Guide:
- Queue: First-In-First-Out (FIFO)
- Stack: Last-In-First-Out (LIFO)
- Use Queue when order matters (like waiting lines)
- Use Stack for undo actions or backtracking
- Push adds, pop removes top (Stack)
- Push adds, shift removes front (Queue)

Full Transcript

This lesson shows when to use a queue or a stack by tracing simple push and pop/shift operations. A stack removes the last item added (LIFO), while a queue removes the first item added (FIFO). The execution table tracks each step and the state of both data structures. Key moments clarify why pop removes the last pushed item and shift removes the first. The visual quiz tests understanding of these states and operations. Remember, stacks are good for undo or backtracking, queues for processing in order.

Practice

1. Which data structure should you use when you need to process tasks in the exact order they arrive, like customers waiting in line at a store?

easy

A. Stack

B. Queue

C. Array

D. Tree

Solution

1. Step 1: Understand the order requirement

   Tasks must be processed in the order they arrive, which means first-in, first-out (FIFO).

2. Step 2: Match the data structure to FIFO

   A queue follows FIFO, so it fits the requirement perfectly.

3. Final Answer:

   Queue -> Option B

4. Quick Check:

   FIFO = Queue [OK]

Hint: Use queue for first-in, first-out order [OK]

Common Mistakes:

• Confusing stack (LIFO) with queue (FIFO)
• Choosing array without order guarantees
• Thinking tree fits linear order

2. Which of the following is the correct TypeScript syntax to add an element to the top of a stack implemented as an array named stack?

easy

A. stack.unshift(element);

B. stack.pop(element);

C. stack.shift(element);

D. stack.push(element);

Solution

1. Step 1: Identify stack operation to add element

   Adding to the top of a stack means pushing an element onto it.

2. Step 2: Match with correct array method

   In TypeScript, push() adds an element to the end (top) of the array acting as a stack.

3. Final Answer:

   stack.push(element); -> Option D

4. Quick Check:

   Push adds to stack top [OK]

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

Common Mistakes:

• Using pop() which removes instead of adds
• Using shift() or unshift() which affect queue ends
• Confusing push() with unshift()

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

const queue: number[] = [];
queue.push(1);
queue.push(2);
queue.push(3);
const first = queue.shift();
console.log(queue);

medium

A. [3, 2]

B. [1, 2, 3]

C. [2, 3]

D. []

Solution

1. Step 1: Trace queue operations

   Elements 1, 2, 3 are added to the queue using push(). Then shift() removes the first element (1).

2. Step 2: Determine queue state after removal

   After removing 1, the queue contains [2, 3].

3. Final Answer:

   [2, 3] -> Option C

4. Quick Check:

   shift() removes first, queue left with [2, 3] [OK]

Hint: shift() removes front in queue [OK]

Common Mistakes:

• Thinking push adds to front instead of back
• Confusing shift() with pop()
• Expecting stack order instead of queue order

4. The following TypeScript code is intended to implement a stack but has a bug. What is the bug?

const stack: number[] = [];
stack.push(10);
stack.push(20);
const top = stack.shift();
console.log(top);

medium

A. Using shift() instead of pop() to remove top element

B. Using push() instead of unshift() to add element

C. Not initializing the stack array

D. Using console.log incorrectly

Solution

1. Step 1: Identify stack removal method

   Stack removes the top element using pop(), not shift().

2. Step 2: Analyze code's removal method

   The code uses shift(), which removes the first element, breaking stack behavior.

3. Final Answer:

   Using shift() instead of pop() to remove top element -> Option A

4. Quick Check:

   Stack removal = pop(), not shift() [OK]

Hint: Stack removes top with pop(), not shift() [OK]

Common Mistakes:

• Confusing shift() with pop()
• Thinking push() adds to front
• Ignoring array initialization

5. You are designing a system to undo and redo user actions. Which data structure combination is best suited for this, and why?

hard

A. Two stacks: one for undo, one for redo, because stacks allow reversing actions easily

B. Two queues: one for undo, one for redo, because queues maintain order of actions

C. One stack only, because redo is not needed

D. One queue only, because undo and redo are processed in order

Solution

1. Step 1: Understand undo/redo requirements

   Undo and redo require reversing and reapplying actions in last-in, first-out order.

2. Step 2: Match data structures to behavior

   Stacks naturally support LIFO, so using two stacks (undo and redo) allows easy push/pop for these operations.

3. Final Answer:

   Two stacks: one for undo, one for redo, because stacks allow reversing actions easily -> Option A

4. Quick Check:

   Undo/Redo = Two stacks (LIFO) [OK]

Hint: Undo/Redo needs two stacks for LIFO action reversal [OK]

Common Mistakes:

• Using queues which do not reverse order easily
• Ignoring redo functionality
• Using only one data structure