Linked Lists for Visual Learners

When I was first introduced to linked lists, it seemed so incredibly abstract that I feel like my brain exploded. I also work with data structures differently than some other programmers. I’m an extremely visual and kinesthetic learner — I have to feel and touch something in order to work with it. I feel like I’m finally grasping linked lists in a visual way, and I wanted to share my experience to see if it will help any others out there.

Structure of Linked Lists

I wish someone would’ve said right away — “Linked lists can come in many data structures.”

When I saw this:

I thought we’d be learning about some obscure new data structure that lived in outer space.

Linked lists are actually something that can already exist in ARRAYS or OBJECTS. I wish I would’ve been introduced to it that way in the first place!

Part 1: Linked Lists can look like an array

It just appears like an innocent array — see?

[2,4,3]

But don’t be deceived — they are still LINKED. For example, the head node value in this instance is 2, and node.next returns:

[4,3]

So using our visual from above:

2 — > [4,3]

Make sense?

My next question was — OK. I know how to work with arrays in regular Javascript. How do I work with arrays that are linked lists?

My first lesson after working with this for quite some time was if you want to work with it, FIRST, STORE IT.

/**
 * Definition for singly-linked list.
 * function ListNode(val, next) {
 * this.val = (val===undefined ? 0 : val)
 * this.next = (next===undefined ? null : next)
 * }
 */
/** (from LeetCode)
linkedList1 = [2,4,3]
//STORE IT TO WORK WITH IT
let p1 = linkedList1
//Now I can do something to it, for example, put it all into a normal array if that was ever needed:
let array1 = []
while (p1 !== null) {
array1.push(p1.val)
p1 = p1.next
}

That way I have access to .val — which extracts the value of the node, or .next, which returns the next node.

The same goes for creating a linked list, remember to STORE IT to work with it.

const dummyHead = new ListNode(0) //create it
let current = dummyHead // store it
//Now work with it! I was using an array in this case, but this is the loop needed to create a linked list from an array, as I needed to return a linked list after making some changes to it.
let final = [2, 4, 6,8] //normal array
for (let i = 0; i < final.length; i++){
 current.next = new ListNode(final[i])
 current = current.next
}
return final

Now, it will appear/return as [2,4,6,8], but it will be a linked list.

Part 2: Linked Lists can be Objects

Let’s examine this code for a moment.

//let firstNode = {name: ‘susie’, next: ‘rkjasj’}
//let secondNode = {name: ‘sam’, next: ‘asnan’}
//let lastNode = {name: ‘charlie’, next: null}
//let collection = {rkjasj: secondNode, asnan: lastNode, whana: firstNode}

The “collection” in this case is the Linked List, which is stored as an object. Each node themselves is also, an object, but they are only linked through the collection. To get the headNode in this case, we could execute this code:

function headNode(list, collection){
    let head = collection[list]
    return head
}

If we called the function headNode(rkjasj, collection), we would get the first node — the whole thing — the object:

{name: ‘sam’, next: ‘asnan’}

To call the next node in the linked list, we could write this code:

function next(list, collection) {
     return collection[list.next]
}

When we run with the code / call the function next(rkjasj, collection):

//let secondNode = {name: ‘sam’, next: ‘asnan’}
//let lastNode = {name: ‘charlie’, next: null}
//let collection = {rkjasj: secondNode, asnan: lastNode, whana: firstNode}

It would return the full node, which is an object, named asnan:

{name: ‘charlie’, next: null}

Summary

I knew I could work with objects. I knew I could work with arrays, but it seemed like a little bit of shift to work with linked lists. I know I have to see the object or be able to visualize it to work with it. I hope this helps my fellow visual learners out there!

Here is the Github for the object linked lists if you’d like to see other operations.

Code on!

Kelsey

Any edits welcome! Send to developerkelseyshiba@gmail.com.