Queue vs Stack When to Use Which in DSA Javascript - 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

↓

End Operation

Decide which data structure to use based on order: Queue for FIFO, Stack for LIFO.

Execution Sample

DSA Javascript

const queue = [];
queue.push(1);
queue.push(2);
const first = queue.shift();

const stack = [];
stack.push(1);
stack.push(2);
const last = stack.pop();

Shows adding and removing elements from a queue (FIFO) and a stack (LIFO).

Execution Table

Step	Operation	Queue State	Stack State	Output	Explanation
1	queue.push(1)	[1]	[]	N/A	Add 1 to queue end
2	queue.push(2)	[1, 2]	[]	N/A	Add 2 to queue end
3	queue.shift()	[2]	[]	1	Remove first element from queue (FIFO)
4	stack.push(1)	[2]	[1]	N/A	Add 1 to stack top
5	stack.push(2)	[2]	[1, 2]	N/A	Add 2 to stack top
6	stack.pop()	[2]	[1]	2	Remove last element from stack (LIFO)
7	End	[2]	[1]	N/A	Final states after operations

💡 All operations complete; queue removes from front, stack removes from top.

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	After Step 4	After Step 5	After Step 6	Final
queue	[]	[1]	[1, 2]	[2]	[2]	[2]	[2]	[2]
stack	[]	[]	[]	[]	[1]	[1, 2]	[1]	[1]
first	undefined	undefined	undefined	1	1	1	1	1
last	undefined	undefined	undefined	undefined	undefined	undefined	2	2

Key Moments - 3 Insights

Why does queue.shift() remove the first element, but stack.pop() removes the last?

queue.shift() removes from the front to keep FIFO order (see Step 3), while stack.pop() removes from the top to keep LIFO order (see Step 6).

Can we use a stack when we want to process items in the order they arrived?

No, because stack removes the last added item first (LIFO), not the first (FIFO). Use a queue for that (see Steps 1-3).

What happens if we pop or shift from an empty structure?

It returns undefined or an error depending on language. Here, we only remove when elements exist (not shown in table).

Visual Quiz - 3 Questions

Look at the execution table at Step 3, what is the queue state after queue.shift()?

A [1, 2]

B [2]

C []

D [1]

💡 Hint

Check the 'Queue State' column at Step 3 in the execution table.

At which step does the stack remove an element?

A Step 4

B Step 5

C Step 6

D Step 3

💡 Hint

Look for 'stack.pop()' operation in the execution table.

If we changed queue.shift() to queue.pop(), how would the queue behave?

A It would behave like a stack (LIFO)

B It would still behave like a queue (FIFO)

C It would remove elements randomly

D It would cause an error

💡 Hint

queue.pop() removes from the end, similar to stack.pop(), changing order to LIFO.

Concept Snapshot

Queue vs Stack Usage:
- Queue: First-In-First-Out (FIFO)
- Stack: Last-In-First-Out (LIFO)
- Use queue when order matters (like waiting lines)
- Use stack for undo, backtracking
- queue.push() adds end, queue.shift() removes front
- stack.push() adds top, stack.pop() removes top

Full Transcript

This lesson shows when to use a queue or a stack. A queue removes items in the order they arrive, called FIFO. A stack removes the last item added first, called LIFO. The code example adds numbers to both structures and removes them. The execution table tracks each step, showing how the queue removes the first element with shift, and the stack removes the last element with pop. Key moments explain why these operations differ and when to use each structure. The quiz tests understanding of these steps and behaviors.

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. Graph

B. Stack

C. Tree

D. Queue

Solution

1. Step 1: Understand the order of processing

   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 D

4. Quick Check:

   FIFO = Queue [OK]

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

Common Mistakes:

• Choosing stack which is last-in, first-out
• Confusing queue with tree or graph
• Thinking stack can process in arrival order

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

easy

A. stack.unshift(element);

B. stack.shift(element);

C. stack.push(element);

D. stack.pop(element);

Solution

1. Step 1: Identify stack insertion method

   Stacks add elements on top, so we use push() to add at the end of the array.

2. Step 2: Check JavaScript array methods

   push() adds element at the end, shift() removes from front, unshift() adds at front, pop() removes from end.

3. Final Answer:

   stack.push(element); -> Option C

4. Quick Check:

   Stack add = push() [OK]

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

Common Mistakes:

• Using shift() which removes from front
• Using unshift() which adds at front (queue behavior)
• Using pop() which removes element

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

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

medium

A. [1, 2, 3]

B. [2, 3]

C. [3, 2]

D. [1, 3]

Solution

1. Step 1: Trace queue operations

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

2. Step 2: Determine queue state after shift()

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

3. Final Answer:

   [2, 3] -> Option B

4. Quick Check:

   shift() removes first element [OK]

Hint: shift() removes first element from queue [OK]

Common Mistakes:

• Thinking push adds to front
• Confusing shift() with pop()
• Expecting original array unchanged

4. The following code is intended to implement a stack using an array, but it has a bug. What is the bug?

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

medium

A. Using shift() removes bottom element, not top

B. push() should be replaced with pop()

C. stack is not initialized correctly

D. Missing return statement

Solution

1. Step 1: Understand stack behavior

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

2. Step 2: Identify incorrect method usage

   shift() removes first element (bottom), so using shift() breaks stack LIFO behavior.

3. Final Answer:

   Using shift() removes bottom element, not top -> Option A

4. Quick Check:

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

Hint: Use pop() to remove top from stack [OK]

Common Mistakes:

• Using shift() instead of pop()
• Thinking push() removes element
• Confusing stack with queue methods

5. You are designing a browser's back button feature. Which data structure is best to store the history of visited pages and why?

hard

A. Stack, because the last visited page should be returned first

B. Queue, because pages are visited in order and removed from front

C. Graph, because pages link to each other

D. Array, because it allows random access

Solution

1. Step 1: Understand back button behavior

   The back button returns to the last visited page first, so last-in, first-out (LIFO) order is needed.

2. Step 2: Match data structure to LIFO

   Stack follows LIFO, so it is the best choice to store history for back navigation.

3. Final Answer:

   Stack, because the last visited page should be returned first -> Option A

4. Quick Check:

   Back button = LIFO = Stack [OK]

Hint: Back button needs last-in, first-out order [OK]

Common Mistakes:

• Choosing queue which is FIFO
• Thinking graph or array fits better
• Ignoring order of page visits