Creating a Singly Linked List from Scratch in DSA Javascript - Visual Walkthrough

Concept Flow - Creating a Singly Linked List from Scratch

Create new node with value

↓

Is list empty? head == null

↓

Set head = new node

↓

Set last node.next = new node

↓

Done

Start by creating a new node. If the list is empty, set head to this node. Otherwise, go to the last node and link it to the new node.

Execution Sample

DSA Javascript

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

class LinkedList {
  constructor() {
    this.head = null;
  }

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

const list = new LinkedList();
list.append(1);
list.append(2);
list.append(3);

This code creates a singly linked list and appends three nodes with values 1, 2, and 3.

Execution Table

Step	Operation	Nodes in List	Pointer Changes	Visual State
1	Create new node with value 1	None	newNode -> Node(1)	null
2	List empty? head == null	None	head == null (true)	null
3	Set head = newNode	1	head -> Node(1)	1 -> null
4	Create new node with value 2	1	newNode -> Node(2)	1 -> null
5	List empty? head == null	1	head != null (false)	1 -> null
6	Traverse to last node	1	current -> Node(1)	1 -> null
7	Set current.next = newNode	2	Node(1).next -> Node(2)	1 -> 2 -> null
8	Create new node with value 3	2	newNode -> Node(3)	1 -> 2 -> null
9	List empty? head == null	2	head != null (false)	1 -> 2 -> null
10	Traverse to last node	2	current -> Node(1)	1 -> 2 -> null
11	Move current to next	2	current -> Node(2)	1 -> 2 -> null
12	Set current.next = newNode	3	Node(2).next -> Node(3)	1 -> 2 -> 3 -> null
13	End of append calls	3	No pointer changes	1 -> 2 -> 3 -> null

💡 All append operations done, list contains 3 nodes linked in order.

Variable Tracker

Variable	Start	After Step 3	After Step 7	After Step 12	Final
head	null	Node(1)	Node(1)	Node(1)	Node(1)
newNode	undefined	Node(2)	Node(2)	Node(3)	Node(3)
current	undefined	undefined	Node(1)	Node(2)	Node(2)
Nodes in List	0	1	2	3	3
Visual State	null	1 -> null	1 -> 2 -> null	1 -> 2 -> 3 -> null	1 -> 2 -> 3 -> null

Key Moments - 3 Insights

Why do we check if head is null before adding a new node?

Because if head is null, the list is empty and the new node becomes the first node (head). This is shown in step 2 and 3 where head is set to newNode.

Why do we traverse the list to find the last node before adding a new node?

Because in a singly linked list, we can only add a new node at the end by linking it to the last node's next pointer. This traversal is shown in steps 6, 10, and 11.

What does the visual state '1 -> 2 -> 3 -> null' mean?

It shows the linked list nodes in order, where each arrow points to the next node, and 'null' means the end of the list. This final state is shown after step 12.

Visual Quiz - 3 Questions

Look at the execution table, what is the value of head after step 3?

A Node with value 1

B null

C Node with value 2

D undefined

💡 Hint

Check the 'Pointer Changes' and 'Visual State' columns at step 3.

At which step does the list first have two nodes linked?

A Step 3

B Step 12

C Step 7

D Step 2

💡 Hint

Look for when 'Nodes in List' changes to 2 and the visual state shows two nodes.

If we skip the traversal in append, what would happen to the list?

A New nodes would be added at the head

B New nodes would not be linked properly, breaking the list

C New nodes would overwrite the head

D List would remain unchanged

💡 Hint

Refer to the traversal steps 6, 10, and 11 and their role in linking nodes.

Concept Snapshot

Creating a Singly Linked List:
- Define Node with value and next pointer
- Start with head = null (empty list)
- To add (append):
  * Create new node
  * If head is null, set head = new node
  * Else traverse to last node
  * Set last node.next = new node
- List ends with node.next = null
- Visual: 1 -> 2 -> 3 -> null

Full Transcript

We create a singly linked list by first defining a Node class with a value and a next pointer set to null. The LinkedList class starts with head as null, meaning the list is empty. When we append a new value, we create a new node. If the list is empty (head is null), we set head to this new node. Otherwise, we start at head and move through each node's next pointer until we find the last node (where next is null). We then link this last node's next pointer to the new node. This process is repeated for each append call, building the list step by step. The visual state shows the nodes connected in order, ending with null to mark the list's end.

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