JavaScript Program to Implement a Circular Queue Using Arrays

🎓 Top 15 Udemy Courses (80-90% Discount): My Udemy Courses - Ramesh Fadatare — All my Udemy courses are real-time and project oriented courses.

▶️ Subscribe to My YouTube Channel (178K+ subscribers): Java Guides on YouTube

▶️ For AI, ChatGPT, Web, Tech, and Generative AI, subscribe to another channel: Ramesh Fadatare on YouTube

Introduction

A Circular Queue is a linear data structure in which the last position is connected back to the first position, forming a circle. It is often used in situations where a fixed-size buffer is required, such as in traffic simulation, resource management, or handling real-time data.

In a circular queue:

• Front: Points to the front (first) element in the queue.
• Rear: Points to the last element in the queue.
• Enqueue: Adds an element to the rear.
• Dequeue: Removes an element from the front.
• The queue is considered full when the next position of rear is front.
• The queue is considered empty when front is equal to -1.

This guide will walk you through implementing a circular queue in JavaScript using an array.

Problem Statement

Create a JavaScript program that:

• Implements a Circular Queue using an array.
• Supports operations such as:
  • Enqueue: Insert an element into the circular queue.
  • Dequeue: Remove an element from the circular queue.
  • Display: Display the current elements in the queue.

Example:

• Input: Enqueue 10, 20, 30, 40, Dequeue once.
• Output: Queue after dequeue: [20, 30, 40].

Solution Steps

1. Define the Circular Queue Class:
   • Implement methods for:
     • Enqueue: Add an element to the rear.
     • Dequeue: Remove an element from the front.
     • Display: Display the current state of the circular queue.
2. Handle Wraparound: Manage the circular nature of the queue using modulo arithmetic.
3. Check Full/Empty Conditions: Ensure that enqueue and dequeue operations only proceed when the queue is not full or empty, respectively.

JavaScript Program

Step 1: Define the Circular Queue Class

// JavaScript Program to Implement a Circular Queue Using Arrays
// Author: https://www.rameshfadatare.com/

class CircularQueue {
    constructor(size) {
        this.size = size;          // Maximum size of the queue
        this.queue = new Array(size); // Array to store the queue elements
        this.front = -1;           // Index of the front element
        this.rear = -1;            // Index of the rear element
    }

    // Check if the queue is full
    isFull() {
        return (this.front === (this.rear + 1) % this.size);
    }

    // Check if the queue is empty
    isEmpty() {
        return this.front === -1;
    }

    // Enqueue: Add an element to the queue
    enqueue(element) {
        if (this.isFull()) {
            console.log("Queue is full. Cannot enqueue.");
            return;
        }
        if (this.front === -1) {
            // First element insertion
            this.front = 0;
        }
        this.rear = (this.rear + 1) % this.size;
        this.queue[this.rear] = element;
        console.log(`${element} enqueued`);
    }

    // Dequeue: Remove an element from the queue
    dequeue() {
        if (this.isEmpty()) {
            console.log("Queue is empty. Cannot dequeue.");
            return;
        }

        const removedElement = this.queue[this.front];
        if (this.front === this.rear) {
            // Only one element was present
            this.front = this.rear = -1;
        } else {
            this.front = (this.front + 1) % this.size;
        }
        console.log(`${removedElement} dequeued`);
        return removedElement;
    }

    // Display the elements in the queue
    displayQueue() {
        if (this.isEmpty()) {
            console.log("Queue is empty.");
            return;
        }

        console.log("Queue elements:");
        let i = this.front;
        while (true) {
            console.log(this.queue[i]);
            if (i === this.rear) break;
            i = (i + 1) % this.size;
        }
    }
}

Step 2: Example Usage

// Example usage of the Circular Queue
const cq = new CircularQueue(5); // Circular queue of size 5

// Enqueue elements
cq.enqueue(10);
cq.enqueue(20);
cq.enqueue(30);
cq.enqueue(40);
cq.enqueue(50);

// Display queue
cq.displayQueue(); // Output: 10, 20, 30, 40, 50

// Try to enqueue into a full queue
cq.enqueue(60); // Output: Queue is full. Cannot enqueue.

// Dequeue elements
cq.dequeue(); // Output: 10 dequeued
cq.dequeue(); // Output: 20 dequeued

// Display queue after dequeue
cq.displayQueue(); // Output: 30, 40, 50

// Enqueue more elements after dequeue
cq.enqueue(60);
cq.enqueue(70);

// Display queue after more enqueues
cq.displayQueue(); // Output: 30, 40, 50, 60, 70

Output Example

10 enqueued
20 enqueued
30 enqueued
40 enqueued
50 enqueued
Queue elements:
10
20
30
40
50
Queue is full. Cannot enqueue.
10 dequeued
20 dequeued
Queue elements:
30
40
50
60 enqueued
70 enqueued
Queue elements:
30
40
50
60
70

Explanation

Step 1: Define the Circular Queue Class

• isFull(): Checks if the queue is full by determining if the next position of the rear would equal the front.
• isEmpty(): Checks if the queue is empty by seeing if front is -1.
• enqueue(): Adds an element to the queue by updating the rear pointer and placing the element at that position. The rear is wrapped around using modulo arithmetic ((rear + 1) % size).
• dequeue(): Removes an element from the queue by updating the front pointer and returning the element. If only one element remains, both front and rear are reset to -1.
• displayQueue(): Traverses the queue from front to rear, wrapping around if necessary.

Step 2: Example Usage

• The program creates a circular queue of size 5 and performs various operations such as enqueueing and dequeueing elements. It also handles edge cases where the queue is full or empty.

Time Complexity

• Enqueue: O(1), since it simply updates the rear pointer and inserts the element at the new position.
• Dequeue: O(1), since it updates the front pointer and removes the element.
• Display: O(n), where n is the number of elements in the queue, because it traverses all the elements.

Conclusion

This JavaScript program implements a circular queue using arrays. Circular queues are useful in scenarios where fixed-size buffers are needed, and the wrapping behavior helps optimize memory usage. The program provides essential operations like enqueue, dequeue, and display, ensuring efficient management of queue elements.

My Top and Bestseller Udemy Courses. The sale is going on with a 70 - 80% discount. The discount coupon has been added to each course below:

Build REST APIs with Spring Boot 4, Spring Security 7, and JWT

🆕 High-Demand 80–90% OFF

[NEW] Learn Apache Maven with IntelliJ IDEA and Java 25

🆕 High-Demand 80–90% OFF

ChatGPT + Generative AI + Prompt Engineering for Beginners

🚀 Trending Now 80–90% OFF

Spring 7 and Spring Boot 4 for Beginners (Includes 8 Projects)

🔥 Bestseller 80–90% OFF
Available in Udemy for Business

Building Real-Time REST APIs with Spring Boot - Blog App

🔥 Bestseller 80–90% OFF
Available in Udemy for Business

Building Microservices with Spring Boot and Spring Cloud

🌟 Top Rated 80–90% OFF
Available in Udemy for Business

Java Full-Stack Developer Course with Spring Boot and React JS

🔥 Bestseller 80–90% OFF
Available in Udemy for Business

Build 5 Spring Boot Projects with Java: Line-by-Line Coding

🌟 Top Rated 80–90% OFF

Testing Spring Boot Application with JUnit and Mockito

🔥 Bestseller 80–90% OFF
Available in Udemy for Business

Spring Boot Thymeleaf Real-Time Web Application - Blog App

🔥 Bestseller 80–90% OFF
Available in Udemy for Business

Master Spring Data JPA with Hibernate

🔥 Bestseller 80–90% OFF
Available in Udemy for Business

Spring Boot + Apache Kafka Course - The Practical Guide

🎓 Student Favorite 80–90% OFF
Available in Udemy for Business

Java Testing: Mastering JUnit 5 Framework

🆕 New 80–90% OFF

Reactive Programming in Java: Spring WebFlux and Testing

🌟 Top Rated 80–90% OFF

Spring Boot + RabbitMQ Course - The Practical Guide

🌟 Top Rated 80–90% OFF
Available in Udemy for Business

Functional Programming in Java (Includes Java Collections)

🎓 Student Favorite 80–90% OFF

ChatGPT for Java Developers: Boost Your Productivity with AI

🚀 Trending Now 80–90% OFF