The dequeue method removes and returns the value from the front of the queue, returning null if the queue is empty. If the queue is not empty we should:

• Store the current front node in a temporary variable.
• Update the front pointer to point to the next node.
• If the front is null, also set back to null (the queue is empty now).
• Return the value of the removed node.

Let's see how this looks visually:

myQueue.dequeue()

We start by storing the existing front node (with a value of 1) in a variable removedNode. Now that we've saved the removed node, we can reassign front to front.next, effectively deleting the node with value 1 form our queue. Since front references a node, and not null, we can finish by returning the value of our stored removedNode, 1.

myQueue.dequeue()

This invocation is similar to the previous step. We save a reference to the node with a value of 2, reassign front to front.next (node with value 3) and can return the value of removedNode, 2.

myQueue.dequeue()

Our last invocation of dequeue takes a bit more work. We can begin as normal, storing the node referenced by front with our removedNode variable. Then we reassign front to front.next, which is null, because our queue only had 1 element. If we were to stop here and return removedNode.val, we would return the correct value, but we would have a problem in that back would still be pointing to our removed node. Since our queue is now empty, back should be referencing null, just like front.

This is where our final check comes in. After reassigning front to front.next, we need to check if this new front is null. This time, it is. We must reassign back to null, and finally we can return removedNode.val.

myQueue.dequeue()

When trying to dequeue and empty queue, we return null because there's no front node.

// some code above

dequeue() {
  if (!this.front) return null;

  const removedNode = this.front;
  this.front = this.front.next;
  if (!this.front) {
    this.back = null;
  }
  return removedNode.val;
}

Finally, here's all of our code together:

class ListNode {
  constructor(val = 0, next = null) {
    this.val = val;
    this.next = next;
  }
}

class Queue {
  constructor() {
    this.front = null;
    this.back = null;
  }
  peek() {
    return this.front ? this.front.val : null;
  }

  enqueue(value) {
    const newNode = new ListNode(value);
    if (!this.front) {
      this.front = this.back = newNode;
    } else {
      this.back.next = newNode;
      this.back = newNode;
    }
  }

  dequeue() {
    if (!this.front) return null;

    const removedNode = this.front;
    this.front = this.front.next;
    if (!this.front) {
      this.back = null;
    }
    return removedNode.val;
  }
}


const myQueue = new Queue();
myQueue.enqueue(1);
console.log('Front element:', myQueue.peek());  // logs 'Front element: 1'
myQueue.enqueue(2);
console.log('Front element:', myQueue.peek());  // logs 'Front element: 1'
myQueue.enqueue(3);
console.log('Front element:', myQueue.peek());  // logs 'Front element: 1'
myQueue.dequeue();
console.log('Front element after dequeue:', myQueue.peek());  // logs 'Front element after dequeue: 2'
myQueue.dequeue();
console.log('Front element after dequeue:', myQueue.peek());  // logs 'Front element after dequeue: 3'
myQueue.dequeue();
console.log('Peek on empty queue:', myQueue.peek());  // logs 'Peek on empty queue: null'
console.log('`back` on empty queue:', myQueue.back);  // logs '`back` on empty queue: null'