Queue vs Stack When to Use Which in DSA Javascript - Trade-offs & Analysis

Mental Model

A stack works like a stack of plates where you add and remove from the top. A queue works like a line at a store where the first person in line is served first.

Analogy: Imagine a stack as a pile of books where you can only take the top book off or add a new book on top. A queue is like waiting in line at a coffee shop where the first person to get in line is the first to get served.

Stack (top at right): bottom -> 1 -> 2 -> 3 [top]
Queue (front at left): [front] 1 -> 2 -> 3 -> null [rear]

Dry Run Walkthrough

Input: Stack: push 1, push 2, pop; Queue: enqueue 1, enqueue 2, dequeue

Goal: Show how stack and queue add and remove elements differently

Step 1: Push 1 onto stack

Stack: bottom -> 1 [top]
Queue: empty

Why: Add first element to stack at the top

Step 2: Push 2 onto stack

Stack: bottom -> 1 -> 2 [top]
Queue: empty

Why: Add second element on top of the first

Step 3: Pop from stack

Stack: bottom -> 1 [top]
Queue: empty

Why: Remove the top element (2) from stack

Step 4: Enqueue 1 into queue

Stack: bottom -> 1 [top]
Queue: [front] 1 -> null [rear]

Why: Add first element to the rear of queue

Step 5: Enqueue 2 into queue

Stack: bottom -> 1 [top]
Queue: [front] 1 -> 2 -> null [rear]

Why: Add second element to the rear of queue

Step 6: Dequeue from queue

Stack: bottom -> 1 [top]
Queue: [front] 2 -> null [rear]

Why: Remove the front element (1) from queue

Result:

Stack final: bottom -> 1 [top]
Queue final: [front] 2 -> null [rear]

Annotated Code

DSA Javascript

class Stack {
  constructor() {
    this.items = [];
  }
  push(value) {
    this.items.push(value); // add to top
  }
  pop() {
    if (this.items.length === 0) return null;
    return this.items.pop(); // remove from top
  }
  toString() {
    return 'bottom -> ' + this.items.join(' -> ') + ' [top]';
  }
}

class Queue {
  constructor() {
    this.items = [];
  }
  enqueue(value) {
    this.items.push(value); // add to rear
  }
  dequeue() {
    if (this.items.length === 0) return null;
    return this.items.shift(); // remove from front
  }
  toString() {
    if (this.items.length === 0) return 'empty';
    return '[front] ' + this.items.join(' -> ') + ' -> null [rear]';
  }
}

// Driver code
const stack = new Stack();
stack.push(1);
stack.push(2);
stack.pop();

const queue = new Queue();
queue.enqueue(1);
queue.enqueue(2);
queue.dequeue();

console.log('Stack final:', stack.toString());
console.log('Queue final:', queue.toString());

this.items.push(value); // add to top

add element to top of stack

return this.items.pop(); // remove from top

remove element from top of stack

this.items.push(value); // add to rear

add element to rear of queue

return this.items.shift(); // remove from front

remove element from front of queue

Output

Stack final: bottom -> 1 [top]

Queue final: [front] 2 -> null [rear]

Complexity Analysis

Time: O(1) for push/pop in stack and enqueue in queue; O(n) for dequeue in queue because shift moves all elements

Space: O(n) because both store all elements in an array

vs Alternative: Stack operations are always O(1) using array push/pop; queue dequeue is O(n) with array shift but can be optimized with linked list

Edge Cases

Empty stack pop

Returns null safely without error

DSA Javascript

if (this.items.length === 0) return null;

Empty queue dequeue

Returns null safely without error

DSA Javascript

if (this.items.length === 0) return null;

When to Use This Pattern

When you need last-in-first-out order, use a stack; when you need first-in-first-out order, use a queue.

Common Mistakes

Mistake: Using stack pop to remove from front instead of top
Fix: Use pop() to remove from top only, not front

Mistake: Using queue enqueue and dequeue incorrectly reversing order
Fix: Enqueue adds to rear, dequeue removes from front to maintain order

Summary

Stack adds and removes elements from the top; queue adds at rear and removes from front.

Use stack when you want to reverse order or track recent items; use queue when order matters and you process items in arrival order.

Stack is last-in-first-out; queue is first-in-first-out -- remember the plate stack vs line at store analogy.

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