Create a Binary Tree Manually in DSA Javascript - Execution Trace

Concept Flow - Create a Binary Tree Manually

Create root node

↓

Assign root.left

↓

Assign root.right

↓

Repeat for each child node

↓

Tree fully built

Start by creating the root node, then assign left and right children manually for each node until the tree is complete.

Execution Sample

DSA Javascript

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

const root = new Node(1);
root.left = new Node(2);
root.right = new Node(3);

This code creates a root node with value 1, then manually assigns left and right child nodes with values 2 and 3.

Execution Table

Step	Operation	Node Created	Pointer Changes	Visual State
1	Create root node	Node(1)	root -> Node(1)	1 / \ null null
2	Assign root.left	Node(2)	root.left -> Node(2)	1 / \ 2 null / \ null null
3	Assign root.right	Node(3)	root.right -> Node(3)	1 / \ 2 3 / \ / \ null null null null
4	No more assignments	None	No pointer changes	1 / \ 2 3 / \ / \ null null null null

💡 All nodes assigned, tree creation complete

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	Final
root	null	Node(1)	Node(1)	Node(1)	Node(1)
root.left	null	null	Node(2)	Node(2)	Node(2)
root.right	null	null	null	Node(3)	Node(3)

Key Moments - 3 Insights

Why do we set left and right pointers to null when creating a new node?

Because initially, the new node has no children, so left and right must be null to show no links. See Step 1 in execution_table where Node(1) has null children.

What happens if we forget to assign root.left or root.right?

That child remains null, meaning no node exists there. The tree will be incomplete. See Step 2 and 3 where pointers are assigned to new nodes.

Why do we manually assign children instead of using a loop?

Because manual creation is direct and simple for small trees. Loops are used for larger or dynamic trees. This example shows basic manual linking in Steps 2 and 3.

Visual Quiz - 3 Questions

Look at the execution_table at Step 2, what is the value of root.left?

A null

B Node with value 2

C Node with value 3

D Node with value 1

💡 Hint

Check the Pointer Changes and Visual State columns at Step 2 in execution_table

At which step does root.right get assigned a node?

A Step 3

B Step 1

C Step 2

D Step 4

💡 Hint

Look at the Operation and Pointer Changes columns in execution_table

If we skip Step 3, what would root.right be?

A Node with value 2

B Node with value 3

C null

D Undefined

💡 Hint

Refer to variable_tracker for root.right after Step 2 and Step 3

Concept Snapshot

Create a binary tree by:
1. Creating a root node with value.
2. Manually assigning left and right children.
3. Each node's left and right start as null.
4. Repeat for all nodes to build the tree.
5. Visualize as nodes connected by left/right pointers.

Full Transcript

To create a binary tree manually, start by making a root node with a value. Each node has left and right pointers set to null initially. Then assign left and right children by creating new nodes and linking them to the parent node's left or right pointers. Repeat this process for each node you want to add. This builds the tree step-by-step. The execution table shows each step: creating the root, assigning left child, then right child, and the tree's visual state after each. Variables track the root and its children pointers. Key moments clarify why pointers start as null and what happens if assignments are missed. The quiz tests understanding of pointer assignments and tree structure at each step.

Practice

1. What is the main purpose of creating a binary tree manually in JavaScript?

easy

A. To convert a string into an array

B. To automatically sort numbers in an array

C. To create a list of numbers without any hierarchy

D. To build a tree structure by linking nodes with left and right children

Solution

1. Step 1: Understand what a binary tree is

   A binary tree is a structure where each node has up to two children: left and right.

2. Step 2: Purpose of manual creation

   Manually creating a binary tree means linking nodes by setting their left and right child references.

3. Final Answer:

   To build a tree structure by linking nodes with left and right children -> Option D

4. Quick Check:

   Binary tree = linked nodes with left/right children [OK]

Hint: Binary tree nodes link left and right children manually [OK]

Common Mistakes:

• Thinking binary tree sorts data automatically
• Confusing binary tree with arrays or lists
• Assuming binary tree nodes have more than two children

2. Which of the following is the correct way to create a node object for a binary tree in JavaScript?

easy

A. const node = [5, null, null];

B. const node = (5, null, null);

C. const node = { value: 5, left: null, right: null };

D. const node = 5, left = null, right = null;

Solution

1. Step 1: Understand JavaScript object syntax

   Objects use curly braces with key-value pairs, e.g., { key: value }.

2. Step 2: Check each option

   const node = { value: 5, left: null, right: null }; correctly uses an object with keys value, left, right. Others use array, parentheses, or invalid syntax.

3. Final Answer:

   const node = { value: 5, left: null, right: null }; -> Option C

4. Quick Check:

   Node as object with keys = const node = { value: 5, left: null, right: null }; [OK]

Hint: Use curly braces for node objects with keys [OK]

Common Mistakes:

• Using arrays instead of objects for nodes
• Using parentheses instead of braces
• Trying to declare multiple variables without braces

3. What will be the output of the following code that manually creates a binary tree and prints the root node's left child's value?

const root = { value: 10, left: { value: 5, left: null, right: null }, right: { value: 15, left: null, right: null } };
console.log(root.left.value);

medium

A. 5

B. 15

C. 10

D. undefined

Solution

1. Step 1: Understand the tree structure

   Root node has value 10, left child with value 5, right child with value 15.

2. Step 2: Access root.left.value

   root.left points to node with value 5, so root.left.value is 5.

3. Final Answer:

   5 -> Option A

4. Quick Check:

   root.left.value = 5 [OK]

Hint: Access left child value with root.left.value [OK]

Common Mistakes:

• Confusing root value with left child value
• Accessing root.right.value instead
• Expecting undefined if not careful with null checks

4. Identify the error in the following code that tries to create a binary tree node manually:

const node = { value: 7, left: null, right: null };
node.left.value = 3;

medium

A. Cannot assign value to left because left is null

B. Syntax error in object declaration

C. Missing semicolon after node declaration

D. No error, code runs fine

Solution

1. Step 1: Analyze node.left value

   node.left is set to null, so it has no properties.

2. Step 2: Assigning to node.left.value

   Trying to assign node.left.value = 3 causes error because node.left is null, cannot set property on null.

3. Final Answer:

   Cannot assign value to left because left is null -> Option A

4. Quick Check:

   Assigning property on null causes error [OK]

Hint: Check if child node exists before assigning properties [OK]

Common Mistakes:

• Ignoring that null has no properties
• Assuming automatic node creation on assignment
• Thinking missing semicolon causes error here

5. You want to manually create a binary tree with root value 20, left child 10, and right child 30. Which code correctly creates this tree and prints the right child's value?

hard

A. const root = { value: 20, left: 10, right: 30 };
console.log(root.right);

B. const root = { value: 20, left: { value: 10, left: null, right: null }, right: { value: 30, left: null, right: null } };
console.log(root.right.value);

C. const root = { value: 20, left: { 10 }, right: { 30 } };
console.log(root.right.value);

D. const root = { value: 20, left: null, right: null };
root.left = { value: 10, left: null, right: null };
root.right = { value: 30, left: null, right: null };
console.log(root.right.value);

Solution

1. Step 1: Check tree node structure

   Each child must be an object with value, left, right keys or null.

2. Step 2: Evaluate each option

   const root = { value: 20, left: { value: 10, left: null, right: null }, right: { value: 30, left: null, right: null } }; console.log(root.right.value); correctly creates left and right child nodes as objects with proper keys. const root = { value: 20, left: 10, right: 30 }; console.log(root.right); uses numbers directly, not objects. const root = { value: 20, left: { 10 }, right: { 30 } }; console.log(root.right.value); uses invalid object syntax. const root = { value: 20, left: null, right: null }; root.left.value = 10; root.right.value = 30; console.log(root.right.value); tries to assign properties to null children causing error.

3. Final Answer:

   const root = { value: 20, left: { value: 10, left: null, right: null }, right: { value: 30, left: null, right: null } }; console.log(root.right.value); -> Option B

4. Quick Check:

   Proper node objects with children = const root = { value: 20, left: { value: 10, left: null, right: null }, right: { value: 30, left: null, right: null } }; console.log(root.right.value); [OK]

Hint: Children must be objects with value, left, right keys [OK]

Common Mistakes:

• Assigning numbers directly as children
• Using invalid object syntax for children
• Assigning properties to null children