DEV Community

Cover image for JavaScript - Singly Linked List - push() method
HunorVadaszPerhat
HunorVadaszPerhat

Posted on

JavaScript - Singly Linked List - push() method

Linked List is a linear data structure. It contains a head, a tail and as for a property the length of the list. Each element in the list is called a node. A node in itself as a unit has a value and the reference to the next code - in fact it contains the address of the next node in the list hence the name next which points to the next upcoming node.

Linked List as a data structure compared to others has a dynamic size thus methods such as insert and delete are less resource consuming.

There are different types such as Singly, Doubly and even Circular Linked Lists. The matter of the fact is that Singly Linked Lists are the most common used therefore we will start looking at this type now.

In order to get a clear image what a Node of a Linked List consists of let us look at the following diagram:
Image description
As we can see a single Node has two attributes, namely val, which will hold a value given by the user and next, which will point to the next Node.

The List itself on the other hand has three properties, namely a head, a tail and a length attribute:
Image description
By default each of the properties are given a default value so when a new List is created this values will serve as a starting point from that moment on.
The head will point to the first Node meanwhile the tail will point to the last Node. The length attribute will serve as a counter to keep a track on the length of the List and it is updated after each action performed.

Now that we got a better understanding of what a Node and a Singly Linked List is and what they are consisting of we will look at the push() method which will both insert a new Node in case list is empty so practically create our Linked List plus it will insert a new Node at the end of list.

We will start by instantiating the Singly Linked List class with default values:
Image description

The next step is to call the push() method which takes val as parameter:
Image description

Step 3.: a new Node that takes the input value is created. At this point next property is set by default to null since there is no other Node to point to.
Step 4.: check if List is empty by checking value on head which is null. This simply indicates that head does not point to a Node thus being empty.
Step 5.: since the condition of the if-statement is true we get into the statement execute the next line where we will set head to point to the newNode instead of null.
Step 6.: the next step is to set tail to point to head which basically means that tail will also point to the newNode.
Step 7.: the length of the property is incremented by one.
Step 8.: the newly created list referred to by the dreadful this keyword is returned.

Congratulations!πŸ‘ We have made our first Singly Linked List in JavaScript with the help of the push() method.

In the next iteration we can also use the push() method to insert a new at the end of the list but in this case the condition in the if-statement will be false therefore the code execution will skip to Step 6. where the next property of tail will be set to point to the newNode that has been just created - remember that tail points to our first Node so what we are basically saying is that we make the first Node to point to the newly created one as it is shown in the diagram below:
Image description
Step 7.: tail itself will point to the newly created Node which is also the last Node in the list.
Step 8.: as previously the length property is again updated.
Step 9.: we return the list with two Nodes.

Thank you for time!πŸ™ I hope this article was helpful and made it easier to understand the basic building blocks of a Singly Linked List implemented in JavaScript.

The code for this article is available on the following Github repo

In the next article we will look at the pop method. Until than take care and happy coding πŸ’₯

Top comments (0)