Tech Deep Dive

How the Linked List Page Works

This page explains every major part of the Management Linked List project. All code shown is the real code from this project.

🧠 What is a Linked List?

A Linked List is a collection of nodes. Each node stores a value and a pointer to the next node. Unlike arrays, linked lists don't store data side by side in memory. Instead, each piece of data "points" to the next one like a chain.

Head
"A"
→
Node
"B"
→
Node
"C"
→
End
null

Each box is a Node. The arrows (→) are the .next pointers.

Step-by-Step: How The Code Works

Create a Node with OOP

A Node holds one piece of data (value) and a pointer to the next node (next). When created, next is always null. 

// From script.js — The Node class
class Node {
    constructor(value) {
        this.value = value;
        this.next = null;
    }
}
💡 Think of it like this: Each node is a box with two slots: one for data, one for the address of the next box.

Build the LinkedList Class

The LinkedList class manages a chain of nodes. It tracks the starting point (head), the total count (size), and gives the list a name and ID. 

// From script.js — The LinkedList class
class LinkedList {
    constructor(id, name) {
        this.id   = id || Date.now().toString();
        this.name = name || "New List";
        this.head = null;
        this.size = 0;
    }
}
💡 When a list is created, head is null and size is 0 — an empty list.

Push — Add to the End

push() adds a new node at the end. If empty, the new node becomes the head. Otherwise, we walk the chain to find the last node, then attach it. 

// From script.js — push method
push(val) {
    const node = new Node(val);
    if (!this.head) this.head = node;
    else {
        let current = this.head;
        while (current.next) current = current.next;
        current.next = node;
    }
    this.size++;
}

Visual: push("D") on [A → B → C]

A
→
B
→
C
→
D ✨
→ null

Unshift — Add to the Front

unshift() adds a new node at the front. The new node's next points to the old head, then it becomes the new head. Faster than push — no walking needed. 

// From script.js — unshift method
unshift(val) {
    const node = new Node(val);
    node.next = this.head;
    this.head = node;
    this.size++;
}

Visual: unshift("Z") on [A → B → C]

Z ✨
→
A
→
B
→
C
→ null

Get — Find a Value by Index

get(index) walks through the list counting until it reaches the right position. Returns null if out of bounds. 

// From script.js — get method
get(index) {
    if (index < 0 || index >= this.size) return null;
    let current = this.head;
    for (let i = 0; i < index; i++) current = current.next;
    return current.value;
}

Visual: get(2) on [A → B → C → D]

A[0]
→
B[1]
→
C[2] 🎯
→
D[3]

Result: "C"

Manage Multiple Lists (Create & Delete)

This project manages multiple linked lists. All lists are stored in an array called lists[]. Creating pushes a new LinkedList instance. Deleting removes by ID. 

// From script.js — managing multiple lists
let lists = [];

// Create a new list
lists.push(new LinkedList(null, "My List"));

// Delete selected lists by ID
lists = lists.filter(l => !ids.includes(l.id));

View Details & Persistence

Details panel shows each node with index and value. Data is saved to localStorage so it survives page reloads. toArray() and fromArray() handle conversion for JSON storage. 

// From script.js — toArray & persistence
toArray() {
    const nodes = [];
    let current = this.head;
    while (current) {
        nodes.push(current.value);
        current = current.next;
    }
    return nodes;
}

// Save to localStorage
localStorage.setItem("ll_data", JSON.stringify(
    lists.map(l => ({ id: l.id, name: l.name, items: l.toArray() }))
));

📋 Operations Summary

Operation What it does Speed
push(val) Add to the end O(n)
unshift(val) Add to the front O(1)
pop() Remove from the end O(n)
shift() Remove from the front O(1)
get(index) Find value at position O(n)
set(i, val) Update value at position O(n)
Workshop: Management Linked List — CSI105T Data Structures · Author: 68037294 Raksit Phothong