Add elements to a Queue using Javascript

In JavaScript, there is no built-in queue data structure like other programming languages. However, you can implement a queue using an array object and perform operations like push() to add elements at the end and shift() to remove the first element.

The following diagram illustrates the queue data structure and its FIFO (First In, First Out) principle:

A Queue is a linear data structure that follows the FIFO (First In, First Out) principle. Elements are added at the rear and removed from the front, making it ideal for managing tasks in order.

Here is a basic example of adding elements to a queue using the push() method:

const queue = [];
queue.push(10);  // Add element to rear
console.log(queue);

[ 10 ]

Adding Elements to a Queue using JavaScript

There are various approaches to add elements to a queue implemented using an array:

• Using push() Method
• Using Two Pointer Approach

Using push() Method

The push() method adds elements to the end of an array, which represents the rear of the queue. This is the most straightforward approach for implementing queue insertion.

Syntax

arr.push(value)

Where value is the element to be added to the queue.

Example

The following example demonstrates a Queue class with an addElement() method that uses push() to add elements:

class Queue {
    constructor() {
        this.queue = [];
    }
    
    addElement(value) {
        this.queue.push(value);
        console.log(`Added ${value} to queue`);
    }
    
    display() {
        console.log("Current queue:", this.queue);
    }
}

// Creating queue instance
const q = new Queue();
console.log("Initial queue:");
q.display();

// Adding elements
q.addElement(10);
q.addElement(20);
q.addElement(30);
q.addElement(40);

console.log("\nFinal queue:");
q.display();

Initial queue:
Current queue: []
Added 10 to queue
Added 20 to queue
Added 30 to queue
Added 40 to queue

Final queue:
Current queue: [ 10, 20, 30, 40 ]

Using Two Pointer Approach

The two-pointer approach uses separate variables to track the front and rear positions of the queue. This method provides better control over queue operations and is more memory efficient for certain scenarios.

Algorithm

Steps to implement queue using two pointers:

• Step 1: Initialize an empty array and two pointers
• Step 2: Set front = 0 (points to first element)
• Step 3: Set rear = 0 (points to next insertion position)
• Step 4: To add element: queue[rear] = value, then increment rear

Example

Here's an implementation using the two-pointer approach:

class Queue {
    constructor() {
        this.queue = [];
        this.front = 0;
        this.rear = 0;
    }

    addElement(value) {
        this.queue[this.rear] = value;
        this.rear++;
        console.log(`Added ${value} at position ${this.rear - 1}`);
    }

    display() {
        if (this.rear === this.front) {
            console.log("Queue is empty");
        } else {
            const elements = this.queue.slice(this.front, this.rear);
            console.log("Queue elements:", elements);
            console.log(`Front at index: ${this.front}, Rear at index: ${this.rear}`);
        }
    }
}

// Testing the queue
const q = new Queue();
console.log("Initial state:");
q.display();

console.log("\nAdding elements:");
q.addElement(10);
q.addElement(20);
q.addElement(30);
q.addElement(40);

console.log("\nFinal state:");
q.display();

Initial state:
Queue is empty

Adding elements:
Added 10 at position 0
Added 20 at position 1
Added 30 at position 2
Added 40 at position 3

Final state:
Queue elements: [ 10, 20, 30, 40 ]
Front at index: 0, Rear at index: 4

Comparison

Conclusion

Both methods effectively add elements to a queue in JavaScript. Use push() for simple implementations, while the two-pointer approach offers better control and efficiency for complex queue operations.