Creating a Queue in Javascript

Though Arrays in JavaScript provide all the functionality of a Queue, let us implement our own Queue class. Our class will have the following functions ?

• enqueue(element): Function to add an element in the queue.
• dequeue(): Function that removes an element from the queue.
• peek(): Returns the element from the front of the queue.
• isFull(): Checks if we reached the element limit on the queue.
• isEmpty(): checks if the queue is empty.
• clear(): Remove all elements.
• display(): display all contents of the array

Let's start by defining a simple class with a constructor that takes the max size of the queue and helper functions. As we implemented stacks, we'll implement queues using Arrays as well.

Basic Queue Class Structure

class Queue {
    constructor(maxSize) {
        // Set default max size if not provided
        if (isNaN(maxSize)) {
            maxSize = 10;
        }
        this.maxSize = maxSize;
        // Init an array that'll contain the queue values.
        this.container = [];
    }
    
    // Helper function to display all values while developing
    display() {
        console.log(this.container);
    }
    
    // Checks if queue is empty
    isEmpty() {
        return this.container.length === 0;
    }
    
    // checks if queue is full
    isFull() {
        return this.container.length >= this.maxSize;
    }
}

// Test the basic structure
let queue = new Queue(5);
console.log("Is empty:", queue.isEmpty());
console.log("Is full:", queue.isFull());
queue.display();

Is empty: true
Is full: false
[]

Adding Core Queue Operations

class Queue {
    constructor(maxSize) {
        if (isNaN(maxSize)) {
            maxSize = 10;
        }
        this.maxSize = maxSize;
        this.container = [];
    }
    
    // Add element to the rear of queue
    enqueue(element) {
        if (this.isFull()) {
            console.log("Queue Overflow! Cannot add element.");
            return false;
        }
        this.container.push(element);
        return true;
    }
    
    // Remove element from front of queue
    dequeue() {
        if (this.isEmpty()) {
            console.log("Queue Underflow! No elements to remove.");
            return null;
        }
        return this.container.shift();
    }
    
    // Peek at front element without removing
    peek() {
        if (this.isEmpty()) {
            console.log("Queue is empty!");
            return null;
        }
        return this.container[0];
    }
    
    // Clear all elements
    clear() {
        this.container = [];
    }
    
    display() {
        console.log(this.container);
    }
    
    isEmpty() {
        return this.container.length === 0;
    }
    
    isFull() {
        return this.container.length >= this.maxSize;
    }
}

Complete Queue Example

// Create a queue with max size 4
let queue = new Queue(4);

// Test enqueue operation
console.log("Adding elements:");
queue.enqueue("First");
queue.enqueue("Second");  
queue.enqueue("Third");
queue.display();

// Test peek operation
console.log("Front element:", queue.peek());

// Test dequeue operation
console.log("Removed:", queue.dequeue());
console.log("After dequeue:");
queue.display();

// Fill queue to test overflow
queue.enqueue("Fourth");
queue.enqueue("Fifth");
queue.enqueue("Sixth"); // This should cause overflow
queue.display();

// Test underflow
queue.clear();
console.log("After clear:", queue.dequeue());

Adding elements:
[ 'First', 'Second', 'Third' ]
Front element: First
Removed: First
After dequeue:
[ 'Second', 'Third' ]
Queue Overflow! Cannot add element.
[ 'Second', 'Third', 'Fourth', 'Fifth' ]
Queue Underflow! No elements to remove.
After clear: null

Key Points

The isFull function checks if the length of the container is equal to or more than maxSize and returns accordingly.

The isEmpty function checks if the size of the container is 0.

Queue follows FIFO (First In, First Out) principle - elements are added at the rear using push() and removed from the front using shift().

Conclusion

This Queue implementation provides all essential queue operations with overflow and underflow protection. The class uses JavaScript arrays internally while maintaining proper queue behavior through controlled access methods.