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

Concept Flow - Creating a Singly Linked List from Scratch

Create new node with value

↓

Is list empty?

Yes→Set head to new node

|No↓

Start at head

↓

Traverse until current.next is null

↓

Set current.next to new node

↓

Done

This flow shows how to add a new node to a singly linked list: create node, check if list is empty, if yes set head, else traverse to end and link new node.

Execution Sample

DSA Typescript

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

class LinkedList {
  head: Node | null = null;
  add(value: number) {
    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;
    }
  }
}

This code creates a singly linked list and adds nodes at the end, updating the head if list is empty.

Execution Table

Step	Operation	Nodes in List	Pointer Changes	Visual State
1	Create new node with value 10	None	newNode -> Node(10)	null
2	List empty? Yes, set head to newNode	Node(10)	head -> Node(10)	10 -> null
3	Create new node with value 20	Node(10)	newNode -> Node(20)	10 -> null
4	List empty? No, start at head	Node(10)	current -> head(Node(10))	10 -> null
5	Traverse current.next? current.next is null, stop	Node(10)	current -> Node(10)	10 -> null
6	Set current.next to newNode	Node(10) -> Node(20)	current.next -> Node(20)	10 -> 20 -> null
7	Create new node with value 30	Node(10) -> Node(20)	newNode -> Node(30)	10 -> 20 -> null
8	List empty? No, start at head	Node(10) -> Node(20)	current -> head(Node(10))	10 -> 20 -> null
9	Traverse current.next? current.next is Node(20), move current	Node(10) -> Node(20)	current -> Node(20)	10 -> 20 -> null
10	Traverse current.next? current.next is null, stop	Node(10) -> Node(20)	current -> Node(20)	10 -> 20 -> null
11	Set current.next to newNode	Node(10) -> Node(20) -> Node(30)	current.next -> Node(30)	10 -> 20 -> 30 -> null
12	End of add operations	Node(10) -> Node(20) -> Node(30)	No pointer changes	10 -> 20 -> 30 -> null

💡 All nodes added, traversal stops when current.next is null

Variable Tracker

Variable	Start	After 1	After 2	After 3	Final
head	null	Node(10)	Node(10)	Node(10)	Node(10)
newNode	undefined	Node(10)	Node(20)	Node(30)	Node(30)
current	undefined	undefined	Node(10)	Node(20)	Node(20)

Key Moments - 3 Insights

Why do we check if the list is empty before adding a node?

Because if the list is empty (head is null), we must set head to the new node directly. This is shown in step 2 where head is set to Node(10). Without this, the list would have no starting point.

Why do we traverse until current.next is null, not current itself?

We stop at the last node where current.next is null because we want to link the new node there. If we stopped at current being null, we would lose the reference to the last node. This is shown in steps 5 and 10.

What happens to the newNode variable after linking it to the list?

After linking, newNode is still a reference to the new node, but the list now includes it. The current.next pointer points to newNode, as in steps 6 and 11. The variable newNode can be reused for the next addition.

Visual Quiz - 3 Questions

Look at the execution table, what is the visual state after step 6?

A 20 -> 10 -> null

B 10 -> null

C 10 -> 20 -> null

D null

💡 Hint

Check the Visual State column at step 6 in the execution_table

At which step does the traversal move current from Node(10) to Node(20)?

A Step 4

B Step 9

C Step 5

D Step 10

💡 Hint

Look at the Pointer Changes and Operation columns in execution_table rows 8-10

If the list was empty, which step sets the head pointer?

A Step 2

B Step 3

C Step 1

D Step 4

💡 Hint

See the Pointer Changes and Operation columns at step 2 in execution_table

Concept Snapshot

Creating a Singly Linked List:
- Create a node with value and next=null
- If list empty, set head to new node
- Else traverse to last node (current.next == null)
- Set last node's next to new node
- List grows by linking nodes in sequence
- Traversal stops when next is null

Full Transcript

This lesson shows how to create a singly linked list from scratch. We start by creating a node with a value and next pointer set to null. If the list is empty, we set the head pointer to this new node. If not, we start at the head and move through nodes until we find the last node whose next pointer is null. Then we link the new node there by setting last node's next to the new node. This process repeats for each new value added. The execution table tracks each step, showing how nodes are created, pointers updated, and the list grows visually as 10 -> 20 -> 30 -> null. Key moments clarify why we check for empty list and why traversal stops at current.next == null. The visual quiz tests understanding of these steps. This method builds a simple, linear chain of nodes connected by next pointers, forming a singly linked list.

Practice

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

easy

A. To store elements in a sequence where each element points to the next one

B. To store elements with keys and values for fast lookup

C. To store elements in a sorted array for quick access

D. To store elements in a tree-like hierarchy

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 in the sequence.

2. Step 2: Compare with other data structures

   Unlike key-value stores or trees, singly linked lists maintain a simple linear chain of elements.

3. Final Answer:

   To store elements in a sequence where each element points to the next one -> Option A

4. Quick Check:

   Singly Linked List = sequence with next pointers [OK]

Hint: Remember: singly linked list nodes point only forward [OK]

Common Mistakes:

• Confusing linked lists with arrays
• Thinking linked lists store key-value pairs
• Assuming linked lists are hierarchical like trees

2. Which of the following is the correct TypeScript syntax to define a node class for a singly linked list?

easy

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

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

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

D. class Node { value: number; next: any; constructor(value: number) { this.value = value; this.next = undefined; } }

Solution

1. Step 1: Check the type of the next pointer

   The next pointer should be either another Node or null if it is the last node.

2. Step 2: Verify constructor initialization

   The constructor sets the value and initializes next to null, which is correct for a new node.

3. Final Answer:

   class Node { value: number; next: Node | null; constructor(value: number) { this.value = value; this.next = null; } } -> Option A

4. Quick Check:

   next can be Node or null = class Node { value: number; next: Node | null; constructor(value: number) { this.value = value; this.next = null; } } [OK]

Hint: Use union type for next: Node | null [OK]

Common Mistakes:

• Forgetting to allow next to be null
• Setting next to undefined instead of null
• Using any type for next which loses type safety

3. What will be the output after running this TypeScript code that creates a singly linked list with values 10, 20, 30 and prints it?

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

class LinkedList {
  head: Node | null = null;

  append(value: number) {
    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;
  }

  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.append(10);
list.append(20);
list.append(30);
list.print();

medium

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

B. null

C. 10 -> 20 -> null

D. 10 -> 20 -> 30 -> null

Solution

1. Step 1: Append nodes in order

   Nodes with values 10, 20, and 30 are appended in that order, so the list is 10 -> 20 -> 30.

2. Step 2: Print the list

   The print method traverses from head to end, concatenating values with ' -> ' and ending with 'null'.

3. Final Answer:

   10 -> 20 -> 30 -> null -> Option D

4. Quick Check:

   Appending preserves order = 10 -> 20 -> 30 -> null [OK]

Hint: Append adds at end; print shows sequence [OK]

Common Mistakes:

• Assuming append adds at head instead of tail
• Forgetting to add 'null' at the end
• Printing values in reverse order

4. Identify the error in this TypeScript code snippet that tries to append a node to a singly linked list:

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

class LinkedList {
  head: Node | null = null;

  append(value: number) {
    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.next = newNode;
    }
  }
}

const list = new LinkedList();
list.append(5);
list.append(10);
console.log(list.head.next.value);

medium

A. Error: head is undefined

B. Error: Cannot read property 'value' of null

C. No error; output will be 10

D. Error: next property is missing in Node

Solution

1. Step 1: Check append logic

   The append method correctly adds the first node as head and subsequent nodes at the end.

2. Step 2: Verify output of console.log

   After appending 5 and 10, head.next points to the node with value 10, so accessing value is valid.

3. Final Answer:

   No error; output will be 10 -> Option C

4. Quick Check:

   Proper append and access = 10 [OK]

Hint: Check if head and next are properly assigned before access [OK]

Common Mistakes:

• Forgetting to return after setting head in append
• Accessing next.value when next is null
• Not initializing next to null in Node

5. You want to create a method reverse() in your singly linked list class that reverses the list in place. Which approach correctly reverses the links between nodes?

hard

A. Create a new list and append nodes from the original list in reverse order

B. Iterate through the list, for each node set its next to the previous node, updating previous and current pointers

C. Swap the values of the first and last nodes repeatedly until the middle is reached

D. Remove all nodes and re-insert them at the head one by one

Solution

1. Step 1: Understand in-place reversal

   Reversing links means changing each node's next pointer to point to the previous node, not creating new nodes.

2. Step 2: Identify correct method

   Iterating with previous and current pointers and updating next links reverses the list efficiently in place.

3. Final Answer:

   Iterate through the list, for each node set its next to the previous node, updating previous and current pointers -> Option B

4. Quick Check:

   In-place reversal = update next pointers backward [OK]

Hint: Reverse by redirecting next pointers, not swapping values [OK]

Common Mistakes:

• Swapping node values instead of links
• Creating a new list instead of reversing in place
• Removing and re-adding nodes unnecessarily