Queue Concept and FIFO Principle in DSA Javascript - Interactive Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add an element to the end of the queue.

DSA Javascript

queue.push([1]);

Drag options to blanks, or click blank then click option'

Aelement

Bpop()

Cshift()

Dunshift()

Attempts:

3 left

💡 Hint

Common Mistakes

Using pop() which removes from the end instead of adding.

Using shift() which removes from the front.

Using unshift() which adds to the front.

To add an element to the end of the queue, use push(element).

2fill in blank

medium

Complete the code to remove the first element from the queue.

DSA Javascript

const first = queue.[1]();

Drag options to blanks, or click blank then click option'

Apush

Bunshift

Cpop

Dshift

Attempts:

3 left

💡 Hint

Common Mistakes

Using pop() which removes from the end.

Using push() which adds to the end.

Using unshift() which adds to the front.

shift() removes and returns the first element, following FIFO.

3fill in blank

hard

Fix the error in the code to correctly implement FIFO removal.

DSA Javascript

let removed = queue.[1]();

Drag options to blanks, or click blank then click option'

Ashift

Bpop

Cpush

Dunshift

Attempts:

3 left

💡 Hint

Common Mistakes

Using pop() which removes the last element, breaking FIFO.

Using push() or unshift() which add elements instead of removing.

Using shift() removes the first element, following FIFO correctly.

4fill in blank

hard

Fill both blanks to create a function that enqueues and dequeues correctly.

DSA Javascript

function processQueue(queue, element) {
  queue.[1](element);
  return queue.[2]();
}

Drag options to blanks, or click blank then click option'

Apush

Bpop

Cshift

Dunshift

Attempts:

3 left

💡 Hint

Common Mistakes

Using pop to remove which breaks FIFO.

Using unshift to add which adds to front, not end.

push adds element to the end; shift removes from the front, following FIFO.

5fill in blank

hard

Fill all three blanks to implement a queue with enqueue, dequeue, and peek methods.

DSA Javascript

class Queue {
  constructor() {
    this.items = [];
  }
  enqueue(element) {
    this.items.[1](element);
  }
  dequeue() {
    return this.items.[2]();
  }
  peek() {
    return this.items[[3]];
  }
}

Drag options to blanks, or click blank then click option'

Apush

Bpop

Cshift

D0

Attempts:

3 left

💡 Hint

Common Mistakes

Using pop in dequeue which removes from the end.

Using unshift in enqueue which adds to the front.

Using wrong index in peek.

enqueue uses push to add at end, dequeue uses shift to remove from front, peek returns first element at index 0.

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