Push Using Linked List Node in DSA Javascript - Execution Trace

Concept Flow - Push Using Linked List Node

Create new node with value

↓

Set new node.next to current head

↓

Update head to new node

↓

Done

This flow shows how a new node is created and added at the start of the linked list by adjusting pointers.

Execution Sample

DSA Javascript

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

function push(head, value) {
  const newNode = new Node(value);
  newNode.next = head;
  return newNode;
}

This code creates a new node and pushes it to the front of the linked list, returning the new head.

Execution Table

Step	Operation	Nodes in List	Pointer Changes	Visual State
1	Start with empty list	None	head = null	null
2	Create new node with value 10	Node(10)	newNode.next = null	10 -> null
3	Set newNode.next to head (null)	Node(10)	newNode.next = head (null)	10 -> null
4	Update head to newNode	Node(10)	head = newNode	10 -> null
5	Create new node with value 20	Node(20), Node(10)	newNode.next = head (Node(10))	20 -> 10 -> null
6	Set newNode.next to head (Node(10))	Node(20), Node(10)	newNode.next = head	20 -> 10 -> null
7	Update head to newNode	Node(20), Node(10)	head = newNode	20 -> 10 -> null
8	Create new node with value 30	Node(30), Node(20), Node(10)	newNode.next = head (Node(20))	30 -> 20 -> 10 -> null
9	Set newNode.next to head (Node(20))	Node(30), Node(20), Node(10)	newNode.next = head	30 -> 20 -> 10 -> null
10	Update head to newNode	Node(30), Node(20), Node(10)	head = newNode	30 -> 20 -> 10 -> null
11	End of push operations	Node(30), Node(20), Node(10)	head points to Node(30)	30 -> 20 -> 10 -> null

💡 All nodes pushed; head points to last inserted node (30), list is 30 -> 20 -> 10 -> null

Variable Tracker

Variable	Start	After Step 2	After Step 5	After Step 8	Final
head	null	null	Node(10)	Node(20)	Node(30)
newNode	undefined	Node(10)	Node(20)	Node(30)	Node(30)
newNode.next	undefined	null	Node(10)	Node(20)	Node(20)

Key Moments - 3 Insights

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

Setting newNode.next to head links the new node to the existing list. If we update head first, we lose the reference to the old list. See steps 3 and 6 in the execution_table.

What happens if the list is empty when we push?

If head is null (empty list), newNode.next is set to null, making the new node the only node. This is shown in steps 1 to 4.

Why does the head pointer change after each push?

Because push adds nodes at the front, the head must point to the newest node to keep the list connected. See pointer changes in steps 4, 7, and 10.

Visual Quiz - 3 Questions

Look at the execution_table at step 5, what is the visual state of the list?

A 10 -> null

B null

C 20 -> 10 -> null

D 30 -> 20 -> 10 -> null

💡 Hint

Check the Visual State column at step 5 in the execution_table.

At which step does the head pointer first point to a node with value 20?

A Step 4

B Step 7

C Step 5

D Step 10

💡 Hint

Look at the Pointer Changes column and head updates in the execution_table.

If we forget to set newNode.next to head, what would be the visual state after pushing 30?

A 30 -> null

B 30 -> 20 -> 10 -> null

C 20 -> 10 -> null

D null

💡 Hint

Refer to the importance of newNode.next in the key_moments and execution_table steps 8 and 9.

Concept Snapshot

Push Using Linked List Node:
- Create new node with value
- Set newNode.next to current head
- Update head to newNode
- New node becomes list head
- List grows at front with each push

Full Transcript

This concept shows how to add a new node at the start of a linked list. We create a new node, link it to the current head, then update the head to this new node. This way, the list grows by adding nodes at the front. The execution steps show pushing values 10, 20, and 30, updating pointers and the list state after each push.

Practice

1. What does the push operation do in a linked list when using nodes?

easy

A. Removes the last node from the list

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

C. Searches for a node with a specific value

D. Deletes the first node of the list

Solution

1. Step 1: Understand push operation in linked list

   The push operation adds a new node to the start (head) of the linked list.

2. Step 2: Compare with other operations

   Removing or searching nodes are different operations, not push.

3. Final Answer:

   Adds a new node at the beginning of the list -> Option B

4. Quick Check:

   Push = Add at head [OK]

Hint: Push always adds node at the start of the list [OK]

Common Mistakes:

• Confusing push with pop or delete
• Thinking push adds at the end
• Mixing push with search operation

2. Which of the following is the correct syntax to create a new node and push it to the front of a linked list in JavaScript?

easy

A. newNode = Node(value); head = newNode.next;

B. head = new Node(value); head.next = newNode;

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

D. head.next = new Node(value); head = head.next;

Solution

1. Step 1: Create new node and link it to current head

   We create a new node, set its next to current head, then update head to new node.

2. Step 2: Check each option

   let newNode = new Node(value); newNode.next = head; head = newNode; correctly does this. Others either reverse assignments or miss new keyword.

3. Final Answer:

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

4. Quick Check:

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

Hint: New node's next points to old head, then update head [OK]

Common Mistakes:

• Forgetting to use 'new' keyword
• Assigning head before setting newNode.next
• Mixing order of assignments

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

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

let head = null;

function push(value) {
  let newNode = new Node(value);
  newNode.next = head;
  head = newNode;
}

push(10);
push(20);
push(30);

medium

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

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

C. 20 -> 30 -> 10 -> null

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

Solution

1. Step 1: Trace push calls and list updates

   First push(10): head = 10 -> null
   Second push(20): head = 20 -> 10 -> null
   Third push(30): head = 30 -> 20 -> 10 -> null

2. Step 2: Confirm final linked list order

   New nodes are added at front, so list is 30 -> 20 -> 10 -> null.

3. Final Answer:

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

4. Quick Check:

   Last pushed is first in list [OK]

Hint: Last pushed node becomes new head [OK]

Common Mistakes:

• Assuming push adds at end
• Confusing order of nodes
• Ignoring that head updates each push

4. Identify the error in the following push function for a linked list:

function push(value) {
  let newNode = Node(value);
  newNode.next = head;
  head = newNode;
}

medium

A. Missing 'new' keyword when creating newNode

B. Incorrect assignment of newNode.next

C. head should be assigned before newNode.next

D. Function should return the new head

Solution

1. Step 1: Check node creation syntax

   Node is a class; must use 'new' keyword to create instance. Missing here.

2. Step 2: Verify other assignments

   newNode.next = head and head = newNode are correct order and assignments.

3. Final Answer:

   Missing 'new' keyword when creating newNode -> Option A

4. Quick Check:

   Use 'new' to create class instance [OK]

Hint: Always use 'new' with class constructors [OK]

Common Mistakes:

• Forgetting 'new' causes runtime error
• Swapping assignment order
• Expecting push to return head

5. Given a linked list with nodes 5 -> 15 -> 25 -> null, what will be the list after pushing a new node with value 10 using the push function?

function push(value) {
  let newNode = new Node(value);
  newNode.next = head;
  head = newNode;
}

Assume head points to the first node (5).

medium

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

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

C. 5 -> 10 -> 15 -> 25 -> null

D. 25 -> 15 -> 5 -> 10 -> null

Solution

1. Step 1: Understand push adds node at front

   Push creates new node with value 10, sets its next to current head (5), then updates head to new node.

2. Step 2: Visualize new list order

   New head is 10, followed by old list 5 -> 15 -> 25 -> null, so final list is 10 -> 5 -> 15 -> 25 -> null.

3. Final Answer:

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

4. Quick Check:

   Push adds new node at front [OK]

Hint: Push inserts new node before current head [OK]

Common Mistakes:

• Appending new node at end instead of front
• Not updating head pointer
• Mixing node order after push