How To: Build a Linked List in JavaScript Part 2

Hi everyone! Today we will continuing our exploration into Linked Lists by building a few methods into our Class LinkedList from this previous lesson.

Let's get started!

Goals

Here are our goals for today:

1. Build append()
2. Build prepend()
3. Recap + Summary

By implementing these methods, we will expand the utilization and effectiveness of our Class LinkedList and each instance instantiated thereafter.

Build append()

First off, let's figure out what 'append' means. Append means to add a new node at the end of the linked list.

Therefore, to add something to the end of the linked list, we need to do a few things:

1. Pass in a value to append() as a parameter.
2. Create a new node constant.
3. Set the new node's value property.
4. Set the new node's next property.
5. Update the tail of our instance of LinkedList.
6. Increment the length of our instance of LinkedList.

So, underneath our constructor method, let's create an append() method and pass in 'value':

append(value){


}

How do we create a new node? We can declare and assign a variable called "newNode" and establish the properties that make up a node (a "value" and a "next"):

append(value){
   const newNode = {
       value: value,
       next: null
   }
}

The "value" property is going to be set to the value we pass in as a parameter. The "next" property will be set to null.

Instead of the tail pointing to null, we are now pointing to the newNode we created.

append(value){
   const newNode = {
       value: value,
       next: null
   }
   this.tail.next = newNode
}

We also want establish that our appended newNode is now the tail itself:

append(value){
   const newNode = {
       value: value,
       next: null
   }
   this.tail.next = newNode
   this.tail = newNode
}

Finally, we want to increment (or increase) the length to accommodate for the newly created appended node:

append(value){
   const newNode = {
       value: value,
       next: null
   }
   this.tail.next = newNode
   this.tail = newNode
   this.length++
}

Remember: "this" represents the instance of Class LinkedList.

Let's test this out:

const myLinkedList = new LinkedList(10)
myLinkedList.append(5)
myLinkedList.append(7)

In our console, we should receive something like this:

• Our head node is made up of a 'value' of 10 and a 'next' of the appended 5.
• Our second node has a value of 5 and a 'next' of the appended 7.
• Our tail node has a value of 7 and a 'next' of null (because it is the last node in the list).

Build prepend()

"Prepend", similarly to "append" adds a new node to a linked list. However, prepend adds the node to the beginning.

Having built append(), we can do something very similar for prepend():

1. Pass in a value to prepend() as a parameter.
2. Create a new node constant.
3. Set the new node's value property.
4. Set the new node's next property.
5. Update the head of our instance of LinkedList.
6. Increment the length of our instance of LinkedList.

Beneath our append() method, let's create a prepend() method and pass in "value". We are also going to declare a new constant "newNode" with its "value" property set to the value we pass in:

prepend(value){
   const newNode = {
       value: value,
       next: ___
   }

}

Since this new node is going to the beginning of the linked list, its "next" value must be the previous head node of the linked list:

prepend(value){
   const newNode = {
       value: value,
       next: this.head
   }
}

Finally, we have to set the head of our instance of LinkedList to this newly created node AND increment the length:

prepend(value){
   const newNode = {
       value: value,
       next: this.head
   }
   this.head = newNode
   this.length++
}

If we run an example, like this, in our console:

const newList = new LinkedList(10)
myLinkedList.prepend(44)

We should get returned something like this:

• Our head node is made up of the prepended 'value' of 44 and a 'next' of the node with a value of 10 and a next of null.
• Our tail node has a 'value' of 10 and a 'next' of null (because it is the last node in the list).

Recap + Summary

Here we now have a Class LinkedList built in JavaScript! We are getting to a point where our code provides functionality to instances instantiated from the class. A functional linked list is great for efficient coding, an introduction to Trees, and predictable data rendering.

For the next part in the series, I want to focus on traversing linked lists in order to remove and insert a node in a specific location on the linked list.

Stay tuned! And thank you for reading + coding along with me :)