JavaScript: Implement a Queue using Arrays / Objects

1. Introduction

A Queue is a linear data structure that adheres to the First In First Out (FIFO) principle. This means the first element added will be the first element removed. While JavaScript doesn't have a built-in queue data structure, it can be effortlessly crafted using arrays or objects. In this guide, we will outline how to create a queue with both techniques.

2. Program Overview

We will:

1. Design a Queue class.

2. Embed essential queue methods: enqueue, dequeue, front, and isEmpty.

3. Evaluate our queue structure.

3. Code Program

// Queue implementation using Array

class QueueUsingArray {
    constructor() {
        this.items = []; // Initialize an empty array to maintain queue elements
    }

    // Add an element to the end of the queue
    enqueue(element) {
        this.items.push(element);
    }

    // Remove and return the front element from the queue
    dequeue() {
        if (this.isEmpty()) return "Queue is empty"; 
        return this.items.shift();
    }

    // View the front element without removing it
    front() {
        if (this.isEmpty()) return "Queue is empty";
        return this.items[0];
    }

    // Verify if the queue is empty
    isEmpty() {
        return this.items.length === 0;
    }
}

// Queue implementation using Object

class QueueUsingObject {
    constructor() {
        this.items = {};  // Initialize an empty object to store queue elements
        this.frontIndex = 0;  // Beginning of the queue
        this.backIndex = 0;   // End of the queue
    }

    enqueue(element) {
        this.items[this.backIndex] = element;
        this.backIndex++;
    }

    dequeue() {
        if (this.isEmpty()) return "Queue is empty";
        const result = this.items[this.frontIndex];
        delete this.items[this.frontIndex];
        this.frontIndex++;
        return result;
    }

    front() {
        if (this.isEmpty()) return "Queue is empty";
        return this.items[this.frontIndex];
    }

    isEmpty() {
        return this.frontIndex === this.backIndex;
    }
}

// Test the Queue using Array
const queueArray = new QueueUsingArray();
queueArray.enqueue(1);
queueArray.enqueue(2);
console.log(queueArray.front()); // 1
console.log(queueArray.dequeue());  // 1
console.log(queueArray.isEmpty()); // false

// Test the Queue using Object
const queueObject = new QueueUsingObject();
queueObject.enqueue('A');
queueObject.enqueue('B');
console.log(queueObject.front()); // 'A'
console.log(queueObject.dequeue());  // 'A'
console.log(queueObject.isEmpty()); // false

Output:

1
1
false
A
A
false

4. Step By Step Explanation

1. Initialization:

- For the array approach, we kick off with an empty array. With the object method, we utilize an empty object and two counters to track the front and back of the queue.

2. Enqueue Method:

- In arrays, the native push function does the trick. With objects, we make use of the backIndex as the key.

3. Dequeue Method:

- In arrays, the shift method is our ally. However, with objects, we exploit the frontIndex to grab the element, delete the key-value pair, and then return the value.

4. Front Method:

- This enables us to peek at the front element without removal. In arrays, it's the first element, while for objects, we use the frontIndex as the key.

5. isEmpty Method:

- Here we determine if the queue is vacant by inspecting the length in arrays or comparing the front and back indices in objects. 

Choosing between an array or object is subjective and depends on the use case and personal developer inclination. Both models efficiently encapsulate the core of a queue.