Elementary Data Structures with JavaScript - Linked Lists - PART 2🚀
Tags: javascript, programming, codequality, webdev
Published: 2021-02-11 19:46:26

Table Of Contents
        * 🤓 [INTRODUCTION](#intro)
        * 🟢 [CREATING A NODE](#node)
        * 🔗[CREATING THE LINKED LIST](#linked)
        * 😉[ADD ELEMENT TO THE HEAD OF THE LIST](#add-head)
        * 🐈[ADD ELEMENT TO THE TAIL OF THE LIST](#add-tail)
        * 🔁[CREATE A LINKED LIST FROM AN ARRAY](#from-array)
        * ❌[DELETING ELEMENTS FROM A LIST](#delete)
        * ❌[DELETE HEAD](#delete-head)
        * ✅[CHECK IF AN ELEMENT WITH SPECIFIC VALUE IS IN THE LIST](#isinlist)
        * 👨🏻‍💻[CODE](#code)
        * 🙏 [THANK YOU](#thank-you)


## 🤓 INTRODUCTION <a name="intro"></a>

Welcome, my dear hackers!🚀 Welcome to yet another blog article about elementary data structures. 

If you missed the previous article where we describe the Linked Lists and write pseudocode, you can check it out here:


{% link https://dev.to/codespresso/elementary-data-structures-with-javascript-linked-lists-part-1-n2i %}

Today we are going to implement the Singly-Linked list using JavaScript programming language.

Please feel free to connect with me via [Twitter](https://twitter.com/lazar_dev), [Instagram](https://www.instagram.com/codespressoweb/) or [LinkedIn](https://www.linkedin.com/in/lazar-stankovic-44a199177/)


## 🟢 CREATING A NODE <a name="node"></a>
Every node of the singly linked list, consists of the **info** or the value stored in the **node**, and the **pointer** that points to the next node of the list. Let's create a class describing the **node**.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/sghhh3tci2whr6ny8t59.png)


## 🔗 CREATING THE LINKED LIST <a name="linked"></a>
Since we are creating a Singly-Linked list, I am going to name the class "SLList". The class has a couple of class member variables and those are length (or size) of the list, a pointer to the **head** of the list, a pointer to the **tail** of the list.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/876qq69kz9a408gq7jn2.png)


##😉 ADD ELEMENT TO THE HEAD OF THE LIST <a name="add-head"></a>
We need to implement a function that will add a new element to the **head** of the list.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/9vbysftmbcpl9ukdi12u.png)


##🐈 ADD ELEMENT TO THE TAIL OF THE LIST <a name="add-tail"></a>
This function will provide logic for adding a new element at the **tail** of our linked list.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/q6bcjyxpvip1ybrs3a2o.png)


##🔁 CREATE A LINKED LIST FROM AN ARRAY <a name="from-array"></a>
Let's assume that our user wants to provide an array of elements, but it is required from us to convert that array into the linked list in the respective order. We will do it like this:
1. Check if the provided value is an array
2. If it is, we call a member function that will traverse an array and call our **addToHead** function. I will omit some code so that we can display a nice image.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/278s7djrxr28d8dj52i4.png)


##❌ DELETING ELEMENTS FROM A LIST <a name="delete"></a>
This is the most complex function that we will implement. This function needs to differentiate if we were to delete the first (head), the last (tail), or any other element with the specified value. But, we will also provide an indicator that will override the function to delete the first element it encounters with the specified value.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/c74t87mkkaovy4e2sae2.png)


##❌ DELETING HEAD <a name="delete-head"></a>
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/4e4tb7l5g1o7pymeog86.png)


##❌ DELETING TAIL<a name="delete-head"></a>
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/usmx74v9k8xua9l5iyp0.png)


##✅ IS IN LIST<a name="isinlist"></a>
This function will check if our list includes an element with a specific value.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/da2r370oli226kb18jmi.png)

##👨🏻‍💻 CODE <a name="code"></a>
And finally our code!
{% jsfiddle https://jsfiddle.net/codespresso/ja3hbcxz/67/ js,result,html,css %}


# 🙏 THANK YOU FOR READING!<a name="thank-you"></a>
References:
School notes...
School books...

Please leave a comment, tell me about you, about your work, comment your thoughts, connect with me! 

☕ SUPPORT ME AND KEEP ME FOCUSED!
<a href='https://ko-fi.com/Z8Z33D1HJ' target='_blank'><img height='36' style='border:0px;height:36px;' src='https://cdn.ko-fi.com/cdn/kofi4.png?v=2' border='0' alt='Buy Me a Coffee at ko-fi.com' /></a>

Have a nice time hacking! 😊