Circular Queue Implementation Using Array in DSA Javascript - Build from Scratch

Circular Queue Implementation Using Array

📖 Scenario: Imagine you are managing a small parking lot with limited spaces arranged in a circle. Cars enter and leave in order, and you want to keep track of which spots are occupied using a circular queue.

🎯 Goal: You will build a simple circular queue using an array in JavaScript. This queue will help manage the parking spots by adding cars (enqueue) and removing cars (dequeue) in a circular manner.

📋 What You'll Learn

Create an array called queue with a fixed size of 5 to represent parking spots.

Create two variables front and rear initialized to -1 to track the queue ends.

Write a function enqueue to add a car number to the queue if space is available.

Write a function dequeue to remove a car number from the queue if not empty.

Print the queue array after operations to show the current state.

💡 Why This Matters

🌍 Real World

Circular queues are used in real-world systems like traffic lights, CPU scheduling, and buffering data streams where resources are reused in a circular manner.

💼 Career

Understanding circular queues helps in roles involving system design, embedded systems, and performance optimization where efficient resource management is critical.

1

Create the Circular Queue Array and Pointers

Create an array called queue with size 5 filled with null values. Also create two variables front and rear and set both to -1.

DSA Javascript

const queue = new Array(5).fill(null);
let front = -1;
let rear = -1;
// Your code here

Hint

Use new Array(5).fill(null) to create the array. Initialize front and rear to -1 to show the queue is empty.

2

Add a Car to the Queue (Enqueue)

Write a function called enqueue that takes a car number as input. Inside, check if the queue is full by seeing if (rear + 1) % 5 === front. If full, return false. Otherwise, update rear to (rear + 1) % 5, place the car at queue[rear]. If front is -1, set it to rear. Return true after adding.

DSA Javascript

const queue = new Array(5).fill(null);
let front = -1;
let rear = -1;

function enqueue(car) {
  // Your code here
}

Hint

Check if the queue is full by comparing (rear + 1) % 5 with front. Update rear circularly and add the car. Set front if queue was empty.

3

Remove a Car from the Queue (Dequeue)

Write a function called dequeue that removes and returns the car number at front. If front is -1, return null because the queue is empty. Store the car at queue[front] in a variable. Set queue[front] to null. If front equals rear, set both to -1 (queue becomes empty). Otherwise, update front to (front + 1) % 5. Return the stored car number.

DSA Javascript

const queue = new Array(5).fill(null);
let front = -1;
let rear = -1;

function enqueue(car) {
  if ((rear + 1) % 5 === front) {
    return false;
  }
  rear = (rear + 1) % 5;
  queue[rear] = car;
  if (front === -1) {
    front = rear;
  }
  return true;
}

function dequeue() {
  // Your code here
}

Hint

Check if queue is empty by front === -1. Remove the car at front, clear that spot, and update pointers accordingly.

4

Test the Circular Queue and Print the Result

Use enqueue to add cars numbered 101, 102, and 103 to the queue. Then use dequeue once to remove a car. Finally, print the queue array to show the current state.

DSA Javascript

const queue = new Array(5).fill(null);
let front = -1;
let rear = -1;

function enqueue(car) {
  if ((rear + 1) % 5 === front) {
    return false;
  }
  rear = (rear + 1) % 5;
  queue[rear] = car;
  if (front === -1) {
    front = rear;
  }
  return true;
}

function dequeue() {
  if (front === -1) {
    return null;
  }
  const car = queue[front];
  queue[front] = null;
  if (front === rear) {
    front = -1;
    rear = -1;
  } else {
    front = (front + 1) % 5;
  }
  return car;
}

// Your code here

Hint

Call enqueue three times with 101, 102, and 103. Then call dequeue once. Finally, print the queue array.

Practice

1. What is the main advantage of using a circular queue over a simple linear queue when implemented using an array?

easy

A. It automatically sorts the elements in the queue.

B. It efficiently uses all available space by wrapping around the array.

C. It allows storing different data types in the queue.

D. It uses less memory than a linear queue.

Solution

1. Step 1: Understand linear queue limitation

   In a linear queue using an array, once the rear reaches the end, no more elements can be added even if there is free space at the front.

2. Step 2: Circular queue advantage

   A circular queue connects the end of the array back to the front, allowing reuse of free space and efficient use of the array.

3. Final Answer:

   It efficiently uses all available space by wrapping around the array. -> Option B

4. Quick Check:

   Circular queue = efficient space use [OK]

Hint: Circular queue reuses space by wrapping indices [OK]

Common Mistakes:

• Thinking circular queue sorts elements
• Believing it uses less memory than linear queue
• Assuming it allows mixed data types automatically

2. Which of the following is the correct way to check if a circular queue is full when using an array of size size with front and rear pointers?

easy

A. if (rear === size - 1)

B. if (rear === front)

C. if ((rear + 1) % size === front)

D. if (front === -1)

Solution

1. Step 1: Understand full condition in circular queue

   The queue is full when the next position of rear (rear + 1 modulo size) equals front, meaning no space to insert.

2. Step 2: Check each option

   if ((rear + 1) % size === front) correctly uses modulo to wrap around and compare with front. Others do not correctly represent full condition.

3. Final Answer:

   if ((rear + 1) % size === front) -> Option C

4. Quick Check:

   Full condition = (rear + 1) % size === front [OK]

Hint: Use modulo to wrap rear and compare with front [OK]

Common Mistakes:

• Checking rear === front for full (actually empty condition)
• Ignoring modulo wrap-around
• Using front === -1 to check full

3. Consider the following JavaScript code for a circular queue of size 5. What will be the output after these operations?

const size = 5;
let queue = new Array(size);
let front = -1, rear = -1;

function enqueue(value) {
  if ((rear + 1) % size === front) {
    console.log('Queue is full');
    return;
  }
  if (front === -1) front = 0;
  rear = (rear + 1) % size;
  queue[rear] = value;
}

enqueue(10);
enqueue(20);
enqueue(30);
enqueue(40);
enqueue(50); // This enqueues successfully (queue now full)
console.log(queue);

medium

A. [10, 20, 30, 40, 50]

B. [10, 20, 30, 40, undefined]

C. [10, 20, 30, 40, null]

D. [undefined, 10, 20, 30, 40]

Solution

1. Step 1: Trace enqueue operations

   Initial: front=-1, rear=-1.
   enqueue(10): front=0, rear=0, queue[0]=10.
   enqueue(20): rear=1, queue[1]=20.
   enqueue(30): rear=2, queue[2]=30.
   enqueue(40): rear=3, queue[3]=40.
   enqueue(50): (rear+1)%5 = 4 === front 0? No, rear=4, queue[4]=50. No full printed.

2. Step 2: Verify output

   5 enqueues succeed for size 5. console.log(queue) shows [10, 20, 30, 40, 50].

3. Final Answer:

   [10, 20, 30, 40, 50] -> Option A

4. Quick Check:

   Full after exactly size enqueues [OK]

Hint: Check modulo full condition carefully to trace enqueue [OK]

Common Mistakes:

• Thinking queue full after 4 enqueues (5th fails)
• Confusing undefined and null values
• Ignoring front and rear initial values

4. The following code snippet for dequeue operation in a circular queue has a bug. What is the bug?

function dequeue() {
  if (front === -1) {
    console.log('Queue is empty');
    return null;
  }
  let value = queue[front];
  if (front === rear) {
    front = rear = -1;
  } else {
    front = front + 1;
  }
  return value;
}

medium

A. front should be updated using modulo to wrap around

B. rear should be incremented instead of front

C. The empty check should be rear === -1

D. The function should not return null when empty

Solution

1. Step 1: Analyze front update in dequeue

   When removing an element, front moves forward. Since queue is circular, front must wrap using modulo size.

2. Step 2: Identify bug in front update

   Code uses front = front + 1 without modulo, so front can go beyond array size causing errors.

3. Final Answer:

   front should be updated using modulo to wrap around -> Option A

4. Quick Check:

   Update front with modulo to avoid overflow [OK]

Hint: Always use modulo when moving front or rear in circular queue [OK]

Common Mistakes:

• Incrementing rear instead of front on dequeue
• Checking empty condition incorrectly
• Ignoring modulo wrap-around

5. You have a circular queue of size 4 implemented using an array. Initially, front = -1 and rear = -1. You perform these operations:

enqueue(1); enqueue(2); dequeue(); enqueue(3); enqueue(4); dequeue(); enqueue(5);

What is the final state of the queue array?

hard

A. [undefined, undefined, 3, 5]

B. [5, 2, 3, 4]

C. [undefined, 2, 3, 5]

D. [5, undefined, 3, 4]

Solution

1. Step 1: Trace each operation step-by-step

   Start: front=-1, rear=-1, queue=[undefined,undefined,undefined,undefined]
   enqueue(1): front=0, rear=0, queue=[1,undefined,undefined,undefined]
   enqueue(2): rear=1, queue=[1,2,undefined,undefined]
   dequeue(): value=queue[0]=1, front=1 (no clear), queue=[1,2,undefined,undefined]
   enqueue(3): rear=2, queue=[1,2,3,undefined]
   enqueue(4): rear=3, queue=[1,2,3,4]
   dequeue(): value=queue[1]=2, front=2 (no clear), queue=[1,2,3,4]
   enqueue(5): rear=0, queue[0]=5, queue=[5,2,3,4]

2. Step 2: Final queue array state

   queue=[5,2,3,4]
   front=2, rear=0. Dequeue does not clear slots; old values persist until overwritten. Position 1 skipped.

3. Final Answer:

   [5, undefined, 3, 4] -> Option D

4. Quick Check:

   Wrap-around enqueue updates index 0 after dequeues [OK]

Hint: Track front and rear carefully with modulo wrap [OK]

Common Mistakes:

• Not wrapping rear index on enqueue
• Assuming dequeue clears array slots to undefined
• Confusing front and rear after dequeues