Queue Implementation Using Array 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

enqueue(element) {
  this.items.[1](element);
}

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

Ashift

Bpop

Cpush

Dunshift

Attempts:

3 left

💡 Hint

Common Mistakes

Using pop removes an element instead of adding.

Using shift removes the first element.

Using unshift adds to the front, not the end.

The push method adds an element to the end of the array, which is how we add to the queue.

2fill in blank

medium

Complete the code to remove an element from the front of the queue.

DSA Javascript

dequeue() {
  return this.items.[1]();
}

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

Ashift

Bpush

Cpop

Dunshift

Attempts:

3 left

💡 Hint

Common Mistakes

Using pop removes from the end, not the front.

Using push adds an element instead of removing.

Using unshift adds to the front, not removes.

The shift method removes and returns the first element of the array, which matches removing from the front of the queue.

3fill in blank

hard

Fix the error in the code to check if the queue is empty.

DSA Javascript

isEmpty() {
  return this.items.length [1] 0;
}

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

A=

B==

C!=

D>

Attempts:

3 left

💡 Hint

Common Mistakes

Using single = performs assignment instead of comparison.

Using != checks for not empty, opposite of what we want.

Using > checks if length is greater than zero, not empty.

To check if the queue is empty, we compare length to 0 using == or ===. Using = is assignment, not comparison.

4fill in blank

hard

Fill in the blank to return the front element without removing it.

DSA Javascript

front() {
  if (this.isEmpty()) {
    return undefined;
  }
  return this.items[[1]];
}

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

A0

Bthis.items.length - 1

C1

D-1

Attempts:

3 left

💡 Hint

Common Mistakes

Using 1 accesses the second element, not the front.

Using length - 1 accesses the last element, not the front.

Using -1 is invalid index in JavaScript arrays.

The front element of the queue is at index 0 in the array.

5fill in blank

hard

Fill in the blanks to return the size of the queue and clear it.

DSA Javascript

size() {
  return this.items.[1];
}

clear() {
  this.items = [2];
}

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

Alength

B[]

C{}

Dnull

Attempts:

3 left

💡 Hint

Common Mistakes

Using {} assigns an object, not an array.

Using null removes the array reference, not clearing it properly.

Using other properties does not give size.

The size of the queue is the length of the array. To clear, assign an empty array [].

Practice

1. What is the main characteristic of a queue data structure implemented using an array?

easy

A. It stores elements in sorted order

B. It follows Last-In-First-Out (LIFO) order

C. It follows First-In-First-Out (FIFO) order

D. It allows random access to elements

Solution

1. Step 1: Understand queue behavior

   A queue adds elements at the end and removes from the front, so the first element added is the first removed.

2. Step 2: Compare with options

   FIFO means First-In-First-Out, which matches queue behavior. LIFO is for stacks, random access is for arrays, and sorted order is unrelated.

3. Final Answer:

   It follows First-In-First-Out (FIFO) order -> Option C

4. Quick Check:

   Queue = FIFO [OK]

Hint: Queue always removes the oldest element first [OK]

Common Mistakes:

• Confusing queue with stack (LIFO)
• Thinking queue allows random access
• Assuming queue sorts elements automatically

2. Which of the following is the correct syntax to add an element `x` to the end of a queue implemented as an array named queue in JavaScript?

easy

A. queue.push(x);

B. queue.pop(x);

C. queue.shift(x);

D. queue.unshift(x);

Solution

1. Step 1: Identify method to add at end

   In JavaScript arrays, push() adds an element to the end of the array.

2. Step 2: Check other methods

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

3. Final Answer:

   queue.push(x); -> Option A

4. Quick Check:

   push adds at end [OK]

Hint: Use push() to add at end of array [OK]

Common Mistakes:

• Using pop() which removes instead of adds
• Using shift() or unshift() incorrectly
• Confusing push() with unshift()

3. What will be the output of the following JavaScript code implementing a queue using an array?

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

medium

A. [10, 20, 30]

B. [20, 30]

C. [30, 20]

D. [10, 30]

Solution

1. Step 1: Trace queue operations

   Initially empty array. After push(10), queue = [10]. After push(20), queue = [10, 20].

2. Step 2: Remove first element with shift()

   shift() removes 10, so queue = [20]. Then push(30), queue = [20, 30].

3. Final Answer:

   [20, 30] -> Option B

4. Quick Check:

   After shift and push, queue = [20, 30] [OK]

Hint: shift() removes front, push() adds end [OK]

Common Mistakes:

• Thinking shift() removes from end
• Confusing order of elements after operations
• Assuming push adds at front

4. Identify the error in the following queue implementation using an array and suggest the fix:

const queue = [];
queue.push(1);
queue.push(2);
const removed = queue.pop();
console.log(queue);

medium

A. pop() removes from end; use shift() to remove from front

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

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

D. No error; code works correctly

Solution

1. Step 1: Understand queue removal operation

   Queue removes elements from the front, but pop() removes from the end.

2. Step 2: Correct removal method

   Use shift() to remove the first element to maintain FIFO order.

3. Final Answer:

   pop() removes from end; use shift() to remove from front -> Option A

4. Quick Check:

   Queue removal = shift() [OK]

Hint: Use shift() to remove front element in queue [OK]

Common Mistakes:

• Using pop() which removes last element
• Confusing push() and unshift() roles
• Thinking pop() removes front element

5. Given a queue implemented as an array, how can you efficiently check if the queue is empty before removing an element to avoid errors?

medium

A. Check if queue.length > 1 before calling shift()

B. Check if queue[0] === undefined before calling pop()

C. Call shift() directly without checking

D. Check if queue.length === 0 before calling shift()

Solution

1. Step 1: Understand empty queue condition

   An empty queue has length 0, so no elements to remove.

2. Step 2: Safe removal check

   Check queue.length === 0 before calling shift() to avoid removing from empty array.

3. Final Answer:

   Check if queue.length === 0 before calling shift() -> Option D

4. Quick Check:

   Empty queue check = length === 0 [OK]

Hint: Always check length === 0 before removing [OK]

Common Mistakes:

• Checking wrong index for emptiness
• Calling shift() without checking length
• Checking length > 1 instead of 0