JavaScript Data Structures: Queue: Dequeue
Tags: beginners, tutorial, javascript, webdev
Published: 2020-01-03 15:40:38

---
title: "JavaScript Data Structures: Queue: Dequeue"
description: "JavaScript Data Structures: Queue: Dequeue"
published: true
tags: ["Beginners", "Tutorial", "JavaScript", "Webdev"]
series: JavaScript Data Structures
---

## Intro

[Last time](https://dev.to/miku86/javascript-data-structures-queue-enqueue-2k), we learned to enqueue a node to the end of the Queue.

Today, we learn how to dequeue / remove a new node from the start of the Queue.

---

## Starter Code ▶️

We start with the code [with the enqueue method](https://dev.to/miku86/javascript-data-structures-queue-enqueue-2k).

```js
class Node {
  constructor(value) {
    this.value = value;
    this.next = null;
  }
}

class Queue {
  constructor() {
    this.length = 0;
    this.start = null;
    this.end = null;
  }

  enqueue(value) {
    const newNode = new Node(value);

    if (!this.length) {
      this.start = newNode;
      this.end = newNode;
    } else {
      this.end.next = newNode;
      this.end = newNode;
    }

    this.length += 1;
    return newNode;
  }
}
```

---

## Thoughts 💭

First, we should think about the constraints and possibilities:

If the Queue is empty:

- we can't remove a node

If the Queue has one node:

- set the current start as the node to remove
- set the node after the start as the new start
- set the next node of the node to remove to null
- set the end to null
- decrease the queue's length by 1
- return the node to remove

All remaining cases:

- set the current start as the node to remove
- set the node after the start as the new start
- set the next node of the node to remove to null
- decrease the queue's length by 1
- return the node to remove

Differences:

- we only have to change the end of the queue when we start with one node, because then there is no end left, because the queue will be empty

---

## Example

```js
// current queue:
A (start) ==> B (end)

// desired queue:
              B (start, end)
```

Steps:

```js
// current queue:
A (start) ==> B (end)

// set the node after the start as the new start
A         ==> B (start, end)

// set the next node of the node to remove to null
A             B (start, end)

// desired queue:
              B (start, end)
```

✅

---

## Implementation 📝

```js
class Node {
  constructor(value) {
    this.value = value;
    this.next = null;
  }
}

class Queue {
  constructor() {
    this.length = 0;
    this.start = null;
    this.end = null;
  }

  enqueue(value) {
    const newNode = new Node(value);

    if (!this.length) {
      this.start = newNode;
      this.end = newNode;
    } else {
      this.end.next = newNode;
      this.end = newNode;
    }

    this.length += 1;
    return newNode;
  }

  dequeue() {
    if (!this.length) {
      return null;
    } else {
      // set the current start as the node to remove
      const nodeToRemove = this.start;

      // set the node after the start as the new start
      this.start = this.start.next;

      // set the next node of the node to remove to null
      nodeToRemove.next = null;

      // set the end to null, if the queue will be empty after removing
      if (this.length === 1) {
        this.end = null;
      }

      // decrease the queue's length by 1
      this.length -= 1;

      // return the node to remove
      return nodeToRemove;
    }
  }
}
```

---

## Result

Let's have a look how to use the `dequeue` method and its results.

```js
const newQueue = new Queue();
newQueue.enqueue("new A");
newQueue.enqueue("new B");

// queue with 2 nodes
console.log(newQueue);
// Queue {
//   length: 2,
//   start: Node { value: 'new A', next: Node { value: 'new B', next: null } },
//   end: Node { value: 'new B', next: null }
// }

// remove the start, "new A"
console.log(newQueue.dequeue());
// Node { value: 'new A', next: null }

// 1 node should be left, "new B"
console.log(newQueue);
// Queue {
//   length: 1,
//   start: Node { value: 'new B', next: null },
//   end: Node { value: 'new B', next: null }
// }

// remove the start, "new B"
console.log(newQueue.dequeue());
// Node { value: 'new B', next: null }

// queue should be empty
console.log(newQueue);
// Queue { length: 0, start: null, end: null }
```

✅

---

## Next Part ➡️

We will do a small recap of our Queue.

Don't miss interesting stuff, [subscribe](https://miku86.com/pages/newsletter)!

---

## Questions ❔

- If we would implement the Queue by using an Array, how would we dequeue the start node?