Implement a JavaScript Queue

Queues are fundamental data structures in computer science, essential for managing tasks in a specific order. This challenge will test your understanding of implementing a queue in JavaScript, a common requirement in various applications like task scheduling, breadth-first search algorithms, and managing requests.

Problem Description

Your task is to implement a Queue class in JavaScript. This class should mimic the behavior of a real-world queue, following the First-In, First-Out (FIFO) principle. You will need to implement the following methods:

• enqueue(element): Adds an element to the rear (end) of the queue.
• dequeue(): Removes and returns the element from the front of the queue. If the queue is empty, it should return undefined.
• front(): Returns the element at the front of the queue without removing it. If the queue is empty, it should return undefined.
• isEmpty(): Returns true if the queue is empty, and false otherwise.
• size(): Returns the number of elements in the queue.

Examples

Example 1:

Input:
const myQueue = new Queue();
myQueue.enqueue(10);
myQueue.enqueue(20);
myQueue.enqueue(30);
console.log(myQueue.size()); // Expected Output: 3
console.log(myQueue.front()); // Expected Output: 10
console.log(myQueue.dequeue()); // Expected Output: 10
console.log(myQueue.size()); // Expected Output: 2
console.log(myQueue.dequeue()); // Expected Output: 20

Explanation: The enqueue operations add elements. size() correctly reports the count. front() shows the first element added, and dequeue() removes and returns it. Subsequent dequeue() operations remove the next elements in order.

Example 2:

Input:
const emptyQueue = new Queue();
console.log(emptyQueue.isEmpty()); // Expected Output: true
console.log(emptyQueue.dequeue()); // Expected Output: undefined
console.log(emptyQueue.front()); // Expected Output: undefined

Explanation: An empty queue correctly reports itself as empty. Attempting to dequeue or front from an empty queue results in undefined.

Example 3:

Input:
const fruitQueue = new Queue();
fruitQueue.enqueue('apple');
fruitQueue.enqueue('banana');
console.log(fruitQueue.front()); // Expected Output: 'apple'
fruitQueue.dequeue();
fruitQueue.enqueue('cherry');
console.log(fruitQueue.dequeue()); // Expected Output: 'banana'
console.log(fruitQueue.dequeue()); // Expected Output: 'cherry'
console.log(fruitQueue.isEmpty()); // Expected Output: true

Explanation: Demonstrates adding and removing elements, including adding a new element after some have been removed, maintaining the FIFO order.

Constraints

• The Queue class should be implemented using a JavaScript array as the underlying data structure.
• The methods must adhere to the described behavior for both non-empty and empty queues.
• Your implementation should be efficient for typical queue operations. While specific time complexity targets aren't mandated, aim for common O(1) performance for enqueue, dequeue, front, isEmpty, and size where possible with array manipulation.

Notes

Consider how JavaScript arrays handle adding and removing elements from their ends. Think about the implications for efficiency. You do not need to worry about thread safety or concurrency as this is a single-threaded JavaScript environment.