Data structures in JavaScript: Linked Lists

Data structures in JavaScript: Linked Lists

If you are learning data structures in JavaScript, a linked list is one data structure you should know. A linked list is a linear data structure similar to an array. However, unlike arrays, elements are not stored in a particular memory location or index. Rather each element is a separate object that contains a pointer or a link to the next object in that list.

Linked lists are one of the most important data structures you can learn.

In a linked list, each item contains a reference to the item that follows it.

We can start from the beginning of the list, the head, and iterate through all the items of the list, until we reach the end (the tail).

Compared to an array, items do not sit next to each other in the actual memory (in low-level programming languages) or don’t have an index we can use to randomly access an item of the array.

We can’t reference an item in the middle of the list, without starting from the beginning, as we don’t know how to reference it.

JavaScript does not have an implementation of linked lists, so we will create one now.

First we create the Item class that will be the contained for each item in the list:

class Item {
  next = null
  value = null
  constructor(value) {
    this.value = value
  }
}

We have a pointer to the next item in the list, and the value.

Then we defined a LinkedList class that will host 2 private values: head and tail.

We define an append() method to add an item to the list. If it’s the first item we add, the item is both the head and the tail of the list. Otherwise, we create the item and we assign it to the next property of the tail item:

class LinkedList {
  #head = null
  #tail = null
  append = (value) => {
    const item = new Item(value)
    if (!this.#head) {
      this.#head = item
      this.#tail = item
      return
    }
    this.#tail.next = item
    this.#tail = item
  }
  size = () => {
    let count = 1
    let item = this.#head
    if (!item) return 0
    while ((item = item.next)) {
      count++
    }
    return count
  }
}

This is how we can use it:

const list = new LinkedList()
list.append(1)
list.append(2)
list.append(3)

We can add a size() method to return the size of the list:

class LinkedList {
  //...
  size = () => {
    let count = 1
    let item = this.#head
    if (!item) return 0
    while ((item = item.next)) {
      count++
    }
    return count
  }
}
const list = new LinkedList()
list.size() //0
list.append(1)
list.size() //1
list.append(2)
list.append(3)
list.size() //3

javascript programming web-development developer

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Why Web Development is Important for your Business

With the rapid development in technology, the old ways to do business have changed completely. A lot more advanced and developed ways are ...

Important Reasons to Hire a Professional Web Development Company

    You name the business and I will tell you how web development can help you promote your business. If it is a startup or you seeking some...

What Garbage Collection in JavaScript Is and How It Works

JavaScript values are allocated when things are created (objects, Strings, etc.) and freed automatically when they are no longer used. This process is called Garbage collection.

What Javascript Spread Operator is, How It Works and How to Use It

JavaScript spread operator is one of the more popular features that were introduced in ES6. This tutorial will help you understand it. You will learn what spread operator is and how it works. You will also learn how to use it to copy and merge arrays and object literals, insert data and more.

Top 10 Web Development Trends in 2020 | Web Development Skills

Top 10 Web Development Trends in 2020 will provide you with a detailed list of the trends which are currently being noticed. Upskilling to these trends will help you in landing onto better jobs in 2020-2021.