Creating a Singly Linked List from Scratch in DSA Javascript - Step-by-Step

Mental Model

A singly linked list is a chain of nodes where each node points to the next one, making a simple line of connected items.

Analogy: Imagine a treasure hunt where each clue (node) tells you where to find the next clue, forming a chain you follow step by step.

head -> null

Each node looks like: [value | next] -> next node or null

Dry Run Walkthrough

Input: Create a singly linked list with values 1, 2, 3 in order

Goal: Build a linked list where each node points to the next, ending with null

Step 1: Create first node with value 1 and set head to it

head -> [1 | next] -> null

Why: We need a starting point for the list

Step 2: Create second node with value 2 and link it after first node

head -> [1 | next] -> [2 | next] -> null

Why: Linking second node keeps the chain going

Step 3: Create third node with value 3 and link it after second node

head -> [1 | next] -> [2 | next] -> [3 | next] -> null

Why: Adding third node extends the list further

Result:

head -> 1 -> 2 -> 3 -> null

Annotated Code

DSA Javascript

class Node {
  constructor(value) {
    this.value = value; // store the data
    this.next = null;   // pointer to next node, starts as null
  }
}

class SinglyLinkedList {
  constructor() {
    this.head = null; // start with empty list
  }

  append(value) {
    const newNode = new Node(value); // create new node
    if (!this.head) {
      this.head = newNode; // if list empty, new node is head
      return;
    }
    let current = this.head;
    while (current.next) {
      current = current.next; // move to last node
    }
    current.next = newNode; // link new node at end
  }

  printList() {
    let current = this.head;
    let result = '';
    while (current) {
      result += current.value + ' -> ';
      current = current.next; // move forward
    }
    result += 'null';
    console.log(result);
  }
}

// Driver code
const list = new SinglyLinkedList();
list.append(1);
list.append(2);
list.append(3);
list.printList();

const newNode = new Node(value); // create new node

create a new node with the given value

if (!this.head) { this.head = newNode; // if list empty, new node is head return; }

if list is empty, set new node as head and stop

while (current.next) { current = current.next; // move to last node }

traverse nodes until reaching the last node

current.next = newNode; // link new node at end

attach new node after the last node

while (current) { result += current.value + ' -> '; current = current.next; // move forward }

traverse list to build string representation

Output

1 -> 2 -> 3 -> null

Complexity Analysis

Time: O(n) because appending requires traversing all nodes to find the end

Space: O(n) because each new node uses extra space proportional to number of elements

vs Alternative: Compared to arrays, linked lists allow easy insertion without shifting elements but require traversal to append

Edge Cases

Empty list when appending first node

The new node becomes the head of the list

DSA Javascript

if (!this.head) {
  this.head = newNode; // if list empty, new node is head
  return;
}

When to Use This Pattern

When you need a simple chain of elements with easy insertion at the end or beginning, use a singly linked list to avoid shifting elements.

Common Mistakes

Mistake: Not setting the head when the list is empty
Fix: Check if head is null and assign new node as head before traversing

Mistake: Forgetting to set newNode.next to null explicitly (though constructor does it)
Fix: Ensure new nodes start with next as null to mark list end

Summary

Creates a chain of nodes where each node points to the next, forming a singly linked list.

Use when you want a dynamic list that grows by linking nodes without shifting elements.

The key is to keep track of the head and link new nodes at the end by traversing the list.

Practice

1. What is the main purpose of a Singly Linked List in data structures?

easy

A. To store elements with random access by index

B. To store elements in a tree-like hierarchy

C. To store elements in a linear order where each element points to the next one

D. To store elements in a fixed-size array

Solution

1. Step 1: Understand the structure of a singly linked list

   A singly linked list stores elements in nodes where each node points to the next node, forming a chain.

2. Step 2: Compare with other data structures

   Unlike arrays or trees, singly linked lists do not support random access or hierarchical storage.

3. Final Answer:

   To store elements in a linear order where each element points to the next one -> Option C

4. Quick Check:

   Singly linked list = linear chain of nodes [OK]

Hint: Remember: singly linked list is a chain of nodes [OK]

Common Mistakes:

• Confusing linked list with arrays
• Thinking linked list supports random access
• Mixing linked list with tree structures

2. Which of the following is the correct way to define a Node class for a singly linked list in JavaScript?

easy

A. class Node { constructor(value) { this.next = value; this.value = null; } }

B. class Node { constructor(value) { this.value = value; this.next = null; } }

C. class Node { constructor() { this.value = null; this.next = null; } }

D. class Node { constructor(value) { this.value = null; this.next = value; } }

Solution

1. Step 1: Identify the correct property assignments for a node

   A node should store the given value and have a pointer to the next node, initially null.

2. Step 2: Check each option's constructor

   class Node { constructor(value) { this.value = value; this.next = null; } } correctly assigns value and sets next to null. Others assign incorrectly or swap properties.

3. Final Answer:

   class Node { constructor(value) { this.value = value; this.next = null; } } -> Option B

4. Quick Check:

   Node stores value and next pointer [OK]

Hint: Node must store value and next=null initially [OK]

Common Mistakes:

• Swapping value and next assignments
• Not initializing next to null
• Leaving value or next undefined

3. What will be the output after running this code?

class Node {
  constructor(value) {
    this.value = value;
    this.next = null;
  }
}

class LinkedList {
  constructor() {
    this.head = null;
  }
  add(value) {
    const newNode = new Node(value);
    if (!this.head) {
      this.head = newNode;
    } else {
      let current = this.head;
      while (current.next) {
        current = current.next;
      }
      current.next = newNode;
    }
  }
  print() {
    let current = this.head;
    let result = '';
    while (current) {
      result += current.value + ' -> ';
      current = current.next;
    }
    result += 'null';
    console.log(result);
  }
}

const list = new LinkedList();
list.add(10);
list.add(20);
list.add(30);
list.print();

medium

A. 10 -> 20 -> 30 -> null

B. 30 -> 20 -> 10 -> null

C. 10 -> 20 -> null

D. null

Solution

1. Step 1: Trace the add method calls

   Adding 10 sets head to node with value 10. Adding 20 and 30 appends nodes at the end.

2. Step 2: Trace the print method

   Print traverses from head: 10, then 20, then 30, then null.

3. Final Answer:

   10 -> 20 -> 30 -> null -> Option A

4. Quick Check:

   Nodes added in order, printed in order [OK]

Hint: Add appends at end; print shows nodes in insertion order [OK]

Common Mistakes:

• Assuming add inserts at head
• Printing nodes in reverse order
• Missing last node in print

4. Identify the error in this linked list add method and select the fix:

add(value) {
  const newNode = new Node(value);
  if (this.head === null) {
    this.head = newNode;
  } else {
    let current = this.head;
    while (current.next !== null) {
      current = current.next;
    }
    current = newNode;
  }
}

medium

A. Replace current = newNode; with current.next = newNode;

B. Replace this.head = newNode; with this.head.next = newNode;

C. Remove the while loop entirely

D. Change if (this.head === null) to if (!this.head.next)

Solution

1. Step 1: Understand the purpose of the while loop

   The loop finds the last node where current.next is null.

2. Step 2: Identify the mistake in assignment

   Assigning current = newNode; only changes the local variable, not the list. It should link the last node's next to newNode.

3. Final Answer:

   Replace current = newNode; with current.next = newNode; -> Option A

4. Quick Check:

   Link last node's next to new node [OK]

Hint: Assign newNode to current.next, not current [OK]

Common Mistakes:

• Assigning newNode to current variable instead of current.next
• Changing head incorrectly
• Removing necessary traversal loop

5. You want to create a method remove(value) in your singly linked list that deletes the first node with the given value. Which approach correctly handles removing the head node and other nodes?

hard

A. Remove node by setting head = null if value matches, else do nothing

B. Always traverse from head and remove node by setting current = current.next without checking head separately

C. Traverse list and remove node by setting current.next = null when value matches

D. Check if head has the value, update head to head.next; else traverse and update previous.next to current.next when found

Solution

1. Step 1: Handle removal of head node

   If the head node contains the value, update head to head.next to remove it.

2. Step 2: Traverse and remove non-head nodes

   Traverse nodes keeping track of previous; when node with value found, set previous.next to current.next to unlink it.

3. Final Answer:

   Check if head has the value, update head to head.next; else traverse and update previous.next to current.next when found -> Option D

4. Quick Check:

   Remove head or unlink node by adjusting pointers [OK]

Hint: Handle head removal separately, then unlink nodes [OK]

Common Mistakes:

• Not updating head when removing first node
• Breaking links incorrectly causing list loss
• Setting current.next = null removes too much