Insert at Beginning Head Insert in DSA Javascript - Execution Trace

Concept Flow - Insert at Beginning Head Insert

Create new node

↓

Set new_node.next = head

↓

Update head = new_node

↓

Done

The new node is created, its next pointer set to the current head, then head is updated to this new node.

Execution Sample

DSA Javascript

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

// Insert 5 at beginning
let head = null;
let newNode = new Node(5);
newNode.next = head;
head = newNode;

This code creates a new node with data 5 and inserts it at the beginning of an empty linked list.

Execution Table

Step	Operation	Nodes in List	Pointer Changes	Visual State
1	Start with empty list	∅	head = null	List is empty
2	Create new node with data=5	Node(5) → ∅	newNode created, next=null	┌────────┐ │ data:5 │ │ next:∅ │ └────────┘
3	Set newNode.next = head (null)	Node(5) → ∅	newNode.next = null	┌────────┐ │ data:5 │ │ next:∅ │ └────────┘
4	Update head = newNode	Node(5) → ∅	head points to newNode	head ┌────────┐ │ data:5 │ │ next:∅ │ └────────┘
5	End	Node(5) → ∅	head points to Node(5)	head ┌────────┐ │ data:5 │ │ next:∅ │ └────────┘

💡 Insertion complete, head points to new node with data 5

Variable Tracker

Variable	Start	After Step 2	After Step 3	After Step 4	Final
head	null	null	null	Node(5)	Node(5)
newNode	undefined	Node(5)	Node(5)	Node(5)	Node(5)
newNode.next	undefined	null	null	null	null

Key Moments - 3 Insights

Why do we set newNode.next = head before updating head?

Because newNode.next must point to the old first node (current head) to keep the list linked. See step 3 in execution_table where newNode.next is set before head changes.

What happens if the list is empty before insertion?

head is null initially (step 1). Setting newNode.next = head means newNode.next = null, so the new node points to nothing, becoming the only node. See step 3 and 4.

Why does head change after setting newNode.next?

Because head must point to the new first node after insertion. If we changed head first, we would lose reference to the old list. See step 4 where head updates after newNode.next is set.

Visual Quiz - 3 Questions

Look at the execution_table at step 3, what does newNode.next point to?

A null

B head node

C newNode itself

D undefined

💡 Hint

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

At which step does head start pointing to the new node?

A Step 2

B Step 3

C Step 4

D Step 5

💡 Hint

Look at the 'Pointer Changes' column in execution_table where head is updated.

If the list was not empty and head pointed to Node(10), what would newNode.next point to after step 3?

A null

B Node(10)

C newNode

D undefined

💡 Hint

Refer to the explanation in key_moments about newNode.next pointing to the old head.

Concept Snapshot

Insert at Beginning (Head Insert):
- Create new node with data
- Set newNode.next = current head
- Update head = newNode
- New node becomes first in list
- Works even if list is empty

Full Transcript

To insert a node at the beginning of a linked list, first create the new node. Then set its next pointer to the current head of the list. Finally, update the head pointer to this new node. This way, the new node becomes the first node, and the rest of the list follows it. If the list is empty, head is null, so the new node points to null and becomes the only node. The execution steps show creating the node, linking it, and updating head. Key points include setting newNode.next before changing head to avoid losing the list, and handling empty lists correctly.

Practice

1. What does the "Insert at Beginning" operation do in a singly linked list?

easy

A. Deletes the last node of the list

B. Adds a new node at the end of the list

C. Adds a new node at the start of the list

D. Deletes the first node of the list

Solution

1. Step 1: Understand the operation

   Inserting at the beginning means adding a new node before the current first node.

2. Step 2: Effect on the list

   The new node becomes the new head, pushing the old head to second position.

3. Final Answer:

   Adds a new node at the start of the list -> Option C

4. Quick Check:

   Insert at beginning = Add new head [OK]

Hint: Insert at beginning means new head node [OK]

Common Mistakes:

• Confusing insert at beginning with insert at end
• Thinking it deletes nodes
• Assuming it modifies middle nodes

2. Which of the following is the correct syntax to insert a new node at the beginning of a singly linked list in JavaScript?

easy

A. newNode.next = head; head = newNode;

B. head = newNode.next; newNode = head;

C. head.next = newNode; newNode = head;

D. newNode = head.next; head = newNode;

Solution

1. Step 1: Link new node to current head

   Set newNode.next to point to current head node.

2. Step 2: Update head to new node

   Assign head to newNode so it becomes the first node.

3. Final Answer:

   newNode.next = head; head = newNode; -> Option A

4. Quick Check:

   Link new node to head, then update head [OK]

Hint: Set newNode.next = head, then head = newNode [OK]

Common Mistakes:

• Swapping assignments incorrectly
• Not updating head pointer
• Assigning head.next instead of newNode.next

3. What will be the output linked list after executing the following code?

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

let head = new Node(10);
let newNode = new Node(20);
newNode.next = head;
head = newNode;

// Print list
let current = head;
let result = [];
while(current) {
  result.push(current.data);
  current = current.next;
}
console.log(result);

medium

A. [20, 10]

B. [10, 20]

C. [10]

D. [20]

Solution

1. Step 1: Insert newNode at beginning

   newNode (20) points to head (10), then head updated to newNode.

2. Step 2: Traverse list from new head

   Traversal order: 20 -> 10 -> null, so result array is [20, 10].

3. Final Answer:

   [20, 10] -> Option A

4. Quick Check:

   New node at head means list starts with 20 [OK]

Hint: New node points to old head, head updated [OK]

Common Mistakes:

• Reversing order of nodes in output
• Ignoring head update
• Confusing data values

4. Identify the error in the following code snippet that tries to insert a new node at the beginning of a linked list:

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

let head = new Node(5);
let newNode = new Node(15);
head = newNode;
newNode.next = head;

medium

A. The head is not updated to newNode

B. The next pointer of newNode should be null

C. The newNode is not created properly

D. The newNode.next is assigned after head is updated, causing a cycle

Solution

1. Step 1: Analyze assignment order

   head is set to newNode first, then newNode.next is set to head (which is newNode itself).

2. Step 2: Detect cycle creation

   This causes newNode.next to point to itself, creating a cycle and breaking the list.

3. Final Answer:

   The newNode.next is assigned after head is updated, causing a cycle -> Option D

4. Quick Check:

   Assign next before updating head to avoid cycle [OK]

Hint: Assign newNode.next before head update to avoid cycles [OK]

Common Mistakes:

• Assigning head before newNode.next
• Ignoring pointer references
• Assuming newNode.next should be null always

5. Given a linked list with nodes containing values [30, 20, 10] (head is 30), you want to insert nodes with values [40, 50] at the beginning one by one. What will be the final linked list after these insertions?

hard

A. [40, 50, 30, 20, 10]

B. [50, 40, 30, 20, 10]

C. [30, 20, 10, 40, 50]

D. [10, 20, 30, 40, 50]

Solution

1. Step 1: Insert 40 at beginning

   New head becomes 40, list is [40, 30, 20, 10].

2. Step 2: Insert 50 at beginning

   New head becomes 50, list is [50, 40, 30, 20, 10].

3. Final Answer:

   [50, 40, 30, 20, 10] -> Option B

4. Quick Check:

   Each insert adds new head, order reverses insert sequence [OK]

Hint: Last inserted node becomes new head, list grows front [OK]

Common Mistakes:

• Appending instead of prepending
• Reversing insertion order
• Not updating head after each insert