Queue Concept and FIFO Principle in DSA Javascript

Mental Model

A queue is a line where the first person in is the first person out. We add items at the back and remove from the front.

Analogy: Imagine waiting in line at a coffee shop. The first person who gets in line is the first to get served and leave the line.

front -> [item1] -> [item2] -> [item3] -> back -> null

Dry Run Walkthrough

Input: Start with an empty queue, enqueue 1, enqueue 2, dequeue once

Goal: Show how items enter at the back and leave from the front following FIFO

Step 1: enqueue 1 at back

front -> [1] -> back -> null

Why: We add the first item to the empty queue

Step 2: enqueue 2 at back

front -> [1] -> [2] -> back -> null

Why: New item goes behind the first item

Step 3: dequeue from front

front -> [2] -> back -> null

Why: Remove the first item entered, which is 1

Result:

front -> [2] -> back -> null

Annotated Code

DSA Javascript

class Queue {
  constructor() {
    this.items = [];
  }

  enqueue(value) {
    this.items.push(value); // add to back
  }

  dequeue() {
    if (this.isEmpty()) {
      return null; // nothing to remove
    }
    return this.items.shift(); // remove from front
  }

  isEmpty() {
    return this.items.length === 0;
  }

  print() {
    if (this.isEmpty()) {
      console.log('front -> null');
      return;
    }
    const result = this.items.map(item => `[${item}]`).join(' -> ');
    console.log(`front -> ${result} -> back -> null`);
  }
}

// Driver code
const queue = new Queue();
queue.enqueue(1);
queue.enqueue(2);
queue.print();
queue.dequeue();
queue.print();

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

add new item at the end of the queue

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

remove the first item entered, following FIFO

this.items.length === 0

check if queue is empty before dequeue

Output

front -> [1] -> [2] -> back -> null

front -> [2] -> back -> null

Complexity Analysis

Time: O(1) for enqueue because adding at end is fast; O(n) for dequeue because removing from front shifts items

Space: O(n) because we store all items in an array

vs Alternative: Using a linked list can make dequeue O(1) by removing front without shifting

Edge Cases

dequeue from empty queue

returns null safely without error

DSA Javascript

if (this.isEmpty()) { return null; }

When to Use This Pattern

When you see a problem needing first-in-first-out order, think of a queue to process items in arrival order.

Common Mistakes

Mistake: Removing items from the back instead of the front, breaking FIFO
Fix: Always remove items from the front using shift() or equivalent

Mistake: Adding items at the front instead of the back
Fix: Always add items at the back using push() or equivalent

Summary

A queue stores items so the first added is the first removed (FIFO).

Use a queue when order of processing matters, like waiting lines or task scheduling.

Remember: add at back, remove from front to keep the order correct.

Practice

1. What does FIFO stand for in the context of a queue?

easy

A. First In, First Out

B. First In, Final Out

C. Fast Input, Fast Output

D. First Input, First Output

Solution

1. Step 1: Understand FIFO meaning

   FIFO means the first element added is the first one to be removed.

2. Step 2: Match the acronym

   First In, First Out exactly matches FIFO.

3. Final Answer:

   First In, First Out -> Option A

4. Quick Check:

   FIFO = First In, First Out [OK]

Hint: Remember queue removes in order added, first comes out first [OK]

Common Mistakes:

• Confusing FIFO with LIFO (stack)
• Thinking FIFO means last in first out
• Mixing up acronym words

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

easy

A. q.unshift(5)

B. q.pop(5)

C. q.shift(5)

D. q.push(5)

Solution

1. Step 1: Understand queue insertion

   In a queue implemented with an array, new elements are added at the end.

2. Step 2: Identify correct method

   Array method push adds element at the end, so q.push(5) is correct.

3. Final Answer:

   q.push(5) -> Option D

4. Quick Check:

   Use push to add at queue end [OK]

Hint: Use push to add, shift to remove in JS queue [OK]

Common Mistakes:

• Using pop to add (pop removes last)
• Using shift to add (shift removes first)
• Using unshift adds at front, not end

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

const queue = [];
queue.push(10);
queue.push(20);
queue.push(30);
const first = queue.shift();
console.log(queue);

medium

A. [30, 20]

B. [10, 20, 30]

C. [20, 30]

D. [10, 30]

Solution

1. Step 1: Add elements to queue

   Elements 10, 20, 30 are added in order using push, so queue = [10, 20, 30].

2. Step 2: Remove first element

   Using shift removes the first element (10), so queue becomes [20, 30].

3. Final Answer:

   [20, 30] -> Option C

4. Quick Check:

   Shift removes first, queue left with [20, 30] [OK]

Hint: Shift removes first element, push adds at end [OK]

Common Mistakes:

• Thinking pop removes first element
• Confusing order of elements after shift
• Expecting original array unchanged

4. The following code is intended to remove the first element from a queue implemented as an array. What is the error?

const queue = [1, 2, 3];
queue.pop();
console.log(queue);

medium

A. pop() removes the last element, not the first

B. pop() is not a valid array method

C. pop() adds an element instead of removing

D. pop() removes all elements

Solution

1. Step 1: Understand pop() behavior

   pop() removes the last element from an array, not the first.

2. Step 2: Identify correct method for first element removal

   To remove the first element in a queue, shift() should be used instead of pop().

3. Final Answer:

   pop() removes the last element, not the first -> Option A

4. Quick Check:

   pop removes last, shift removes first [OK]

Hint: Use shift() to remove first, pop() removes last [OK]

Common Mistakes:

• Using pop() to remove first element
• Confusing pop() with shift()
• Expecting pop() to remove all elements

5. You have a queue implemented as an array: let q = [];. You perform these operations:

q.push(1);
q.push(2);
q.shift();
q.push(3);
q.shift();
q.push(4);
console.log(q);

What is the final state of the queue?

hard

A. [2, 3, 4]

B. [3, 4]

C. [1, 2, 3, 4]

D. [4]

Solution

1. Step 1: Trace each operation on queue

   Start with empty q = [].
   push(1) -> [1]
   push(2) -> [1, 2]
   shift() removes 1 -> [2]
   push(3) -> [2, 3]
   shift() removes 2 -> [3]
   push(4) -> [3, 4]

2. Step 2: Confirm final queue state

   After all operations, queue contains [3, 4].

3. Final Answer:

   [3, 4] -> Option B

4. Quick Check:

   FIFO order maintained, final queue is [3, 4] [OK]

Hint: Track push adds end, shift removes front step-by-step [OK]

Common Mistakes:

• Not removing elements with shift correctly
• Assuming push adds at front
• Mixing order of elements after shifts