Queue vs Stack When to Use Which in DSA Javascript - Compare & Choose

Challenge - 5 Problems

🧠 Conceptual

intermediate

When to use a Stack over a Queue?

Which scenario best fits using a stack instead of a queue?

A Undo functionality in a text editor where the last action is reversed first.

B Serving customers in the order they arrive at a bank.

C Printing documents in the order they were sent to the printer.

D Processing tasks in the order they were added to a to-do list.

💡 Hint

Think about which data structure reverses the order of elements.

A stack follows Last In First Out (LIFO), perfect for undo actions where the last action is undone first.

Queues follow First In First Out (FIFO), suitable for processing in arrival order.

❓ Predict Output

intermediate

Output of Queue Operations

What is the printed state of the queue after these operations?

DSA Javascript

const queue = [];
queue.push(1);
queue.push(2);
queue.push(3);
queue.shift();
queue.push(4);
console.log(queue.join(' -> ') + ' -> null');

A 4 -> null

B 3 -> 4 -> null

C 2 -> 3 -> 4 -> null

D 1 -> 2 -> 3 -> 4 -> null

💡 Hint

Remember that shift removes the first element in the queue.

push adds to the end, shift removes from the front.

After removing 1, queue has 2,3, then 4 is added at the end.

❓ Predict Output

advanced

Stack Behavior with Push and Pop

What is the output after running this stack code?

DSA Javascript

const stack = [];
stack.push('a');
stack.push('b');
stack.pop();
stack.push('c');
console.log(stack.join(' -> ') + ' -> null');

A a -> b -> c -> null

B a -> c -> null

C c -> null

D a -> null

💡 Hint

Pop removes the last pushed element.

Push adds to the top, pop removes the top.

After popping 'b', 'c' is pushed on top.

🧠 Conceptual

advanced

Choosing Between Stack and Queue for Task Scheduling

You have tasks that must be processed in the exact order they arrive. Which data structure should you use?

A Queue, because it processes tasks in the order they arrive.

B Stack, because it allows random access to tasks.

C Stack, because it processes the most recent task first.

D Queue, because it processes tasks in reverse order.

💡 Hint

Think about which structure respects arrival order.

Queue follows First In First Out, so tasks are processed in arrival order.

Stack reverses order, so it is not suitable here.

🚀 Application

expert

Simulating Browser History with Stack and Queue

Which data structure combination best models a browser's back and forward navigation?

A Two queues: one for back history and one for forward history.

B One queue for both back and forward history.

C One stack for back history and one queue for forward history.

D Two stacks: one for back history and one for forward history.

💡 Hint

Back and forward navigation require reversing order of pages visited.

Stacks allow pushing and popping pages to go back and forward correctly.

Queues do not support reversing order easily.

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