Insert at End Tail Insert in DSA Javascript - Execution Trace

Concept Flow - Insert at End Tail Insert

Create new node

↓

Is list empty?

↓

Set head

↓

Traverse until current.next == null

↓

Set current.next = new node

↓

Done

We create a new node, check if the list is empty, if yes set head to new node. Otherwise, traverse to the last node and link the new node there.

Execution Sample

DSA Javascript

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

function insertAtEnd(head, data) {
  const newNode = new Node(data);
  if (!head) return newNode;
  let current = head;
  while (current.next) current = current.next;
  current.next = newNode;
  return head;
}

This code inserts a new node with given data at the end of a singly linked list.

Execution Table

Step	Operation	Nodes in List	Pointer Changes	Visual State
1	Create new node with data=40	10 -> 20 -> 30 -> null	newNode points to null	┌────────┐ ┌────────┐ ┌────────┐ │ data:10│ │ data:20│ │ data:30│ │ next:──┼──→ │ next:──┼──→ │ next:∅ │ └────────┘ └────────┘ └────────┘ head
2	Check if head is null	10 -> 20 -> 30 -> null	No change	Same as step 1
3	Set current = head	10 -> 20 -> 30 -> null	current points to node with data 10	Same as step 1, current at 10
4	Traverse current to next node (20)	10 -> 20 -> 30 -> null	current moves to node with data 20	Same nodes, current at 20
5	Traverse current to next node (30)	10 -> 20 -> 30 -> null	current moves to node with data 30	Same nodes, current at 30
6	current.next is null, set current.next = newNode	10 -> 20 -> 30 -> 40 -> null	current.next points to newNode (40)	┌────────┐ ┌────────┐ ┌────────┐ ┌────────┐ │ data:10│ │ data:20│ │ data:30│ │ data:40│ │ next:──┼──→ │ next:──┼──→ │ next:──┼──→ │ next:∅ │ └────────┘ └────────┘ └────────┘ └────────┘ head
7	Return head	10 -> 20 -> 30 -> 40 -> null	No change	Same as step 6

💡 Traversal ends when current.next is null, new node linked at end.

Variable Tracker

Variable	Start	After Step 3	After Step 4	After Step 5	After Step 6	Final
head	Node(10)	Node(10)	Node(10)	Node(10)	Node(10)	Node(10)
current	null	Node(10)	Node(20)	Node(30)	Node(30)	Node(30)
newNode	null	Node(40)	Node(40)	Node(40)	Node(40)	Node(40)

Key Moments - 3 Insights

Why do we check if head is null before traversal?

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 we check head and return newNode if empty.

Why do we stop traversal when current.next is null, not current itself?

Because current.next being null means current is the last node. We want to link the new node after the last node, so we stop at current where current.next is null (step 6).

What changes in the list after linking the new node?

The last node's next pointer changes from null to point to the new node. This is shown in step 6 where current.next points to newNode, extending the list.

Visual Quiz - 3 Questions

Look at the execution table, what is the value of 'current' after step 5?

A Node with data 20

B Node with data 10

C Node with data 30

D null

💡 Hint

Check the 'Pointer Changes' column at step 5 in the execution table.

At which step does the list first include the new node with data 40?

A Step 4

B Step 6

C Step 3

D Step 2

💡 Hint

Look at the 'Nodes in List' and 'Visual State' columns to see when 40 appears.

If the initial list was empty (head = null), what would the function return?

A new node with data

B null

C original head

D undefined

💡 Hint

Refer to step 2 where head is checked for null and newNode is returned if true.

Concept Snapshot

Insert at End (Tail Insert) in Linked List:
- Create new node with data
- If list empty, set head = new node
- Else traverse to last node (where next is null)
- Set last node's next to new node
- New node's next is null
- Returns head of updated list

Full Transcript

This visual trace shows how to insert a new node at the end of a singly linked list. First, a new node is created with the given data and its next pointer set to null. We check if the list is empty by seeing if head is null. If empty, the new node becomes the head. Otherwise, we start at head and move current pointer along the list until current.next is null, meaning current is the last node. Then we link the new node by setting current.next to the new node. The list now ends with the new node. The function returns the head of the updated list. The pointer changes and list states are shown step-by-step with ASCII diagrams. Key moments clarify why we check head for null and why traversal stops at current.next null. Quizzes test understanding of pointer positions and list changes during insertion.

Practice

1. What does the "Insert at End (Tail Insert)" operation do in a linked list?

easy

A. Adds a new node at the end of the linked list

B. Removes the first node from the linked list

C. Adds a new node at the beginning of the linked list

D. Deletes the last node from the linked list

Solution

1. Step 1: Understand the operation

   Insert at End means adding a new node after the last node in the linked list.

2. Step 2: Compare with other operations

   Other options describe removing or adding at the start, which is different from tail insert.

3. Final Answer:

   Adds a new node at the end of the linked list -> Option A

4. Quick Check:

   Insert at End = Add node at tail [OK]

Hint: Tail insert always adds node after the last node [OK]

Common Mistakes:

• Confusing tail insert with head insert
• Thinking it removes nodes instead of adding
• Assuming it inserts in the middle

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

easy

A. let newNode = { data: value }; newNode.next = head;

B. let newNode = { data: value, next: null }; tail.next = newNode; tail = newNode;

C. let newNode = new Node(value); newNode.next = head; head = newNode;

D. let newNode = { value: data, nextNode: null }; head.next = newNode;

Solution

1. Step 1: Identify correct node creation

   Node should have data and next properties; next set to null for tail.

2. Step 2: Insert at end

   Set current tail's next to newNode, then update tail to newNode.

3. Final Answer:

   let newNode = { data: value, next: null }; tail.next = newNode; tail = newNode; -> Option B

4. Quick Check:

   Correct node creation and tail update [OK]

Hint: Tail insert needs next=null and tail pointer update [OK]

Common Mistakes:

• Using wrong property names like nextNode
• Inserting at head instead of tail
• Not updating tail pointer

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

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

class LinkedList {
  constructor() {
    this.head = null;
    this.tail = null;
  }
  insertAtEnd(data) {
    const newNode = new Node(data);
    if (!this.head) {
      this.head = newNode;
      this.tail = newNode;
    } else {
      this.tail.next = newNode;
      this.tail = newNode;
    }
  }
}

const list = new LinkedList();
list.insertAtEnd(5);
list.insertAtEnd(10);
list.insertAtEnd(15);

let current = list.head;
let result = '';
while(current) {
  result += current.data + ' -> ';
  current = current.next;
}
result += 'null';
console.log(result);

medium

A. 5 -> 10 -> 15 -> null

B. 15 -> 10 -> 5 -> null

C. 5 -> 10 -> null

D. null

Solution

1. Step 1: Insert nodes at end

   Nodes 5, 10, 15 are inserted sequentially at the tail.

2. Step 2: Traverse and print list

   Traversal prints nodes in insertion order: 5 -> 10 -> 15 -> null.

3. Final Answer:

   5 -> 10 -> 15 -> null -> Option A

4. Quick Check:

   Tail insert preserves order [OK]

Hint: Tail insert keeps order; print from head to tail [OK]

Common Mistakes:

• Confusing head and tail order
• Missing last node in output
• Printing reversed list

4. Find the error in the following tail insert method and select the correct fix:

insertAtEnd(data) {
  const newNode = new Node(data);
  if (this.head === null) {
    this.head = newNode;
  } else {
    this.tail.next = newNode;
  }
  // Missing update of tail pointer
}

medium

A. Change 'this.head = newNode;' to 'this.tail = newNode;' in if block

B. Set 'newNode.next = this.tail;' before insertion

C. Remove the else block completely

D. Add 'this.tail = newNode;' after setting tail.next

Solution

1. Step 1: Identify missing tail update

   After inserting newNode at tail.next, tail pointer must update to newNode.

2. Step 2: Fix by adding tail update

   Add 'this.tail = newNode;' after 'this.tail.next = newNode;' to keep tail correct.

3. Final Answer:

   Add 'this.tail = newNode;' after setting tail.next -> Option D

4. Quick Check:

   Tail pointer must update after insertion [OK]

Hint: Always update tail pointer after inserting at end [OK]

Common Mistakes:

• Not updating tail pointer causes broken list
• Changing head instead of tail in else block
• Incorrectly setting newNode.next to tail

5. You have a singly linked list with nodes: 1 -> 2 -> 3 -> null and a tail pointer correctly pointing to node 3. You want to insert a new node with value 4 at the end. Which sequence of operations correctly updates the list and tail pointer?

hard

A. Create newNode(4), newNode.next = tail, tail = newNode

B. Create newNode(4), head.next = newNode, tail = newNode

C. Create newNode(4), tail.next = newNode, tail = newNode

D. Create newNode(4), tail = newNode, tail.next = null

Solution

1. Step 1: Create new node with value 4

   Initialize newNode with data=4 and next=null.

2. Step 2: Link newNode after current tail and update tail

   Set tail.next = newNode to link, then update tail = newNode to move tail pointer.

3. Final Answer:

   Create newNode(4), tail.next = newNode, tail = newNode -> Option C

4. Quick Check:

   Tail insert requires linking and tail update [OK]

Hint: Link new node after tail, then update tail pointer [OK]

Common Mistakes:

• Linking new node to head instead of tail
• Setting newNode.next to tail (wrong direction)
• Updating tail before linking new node