Create a Binary Tree Manually in DSA Typescript - Execution Trace

Concept Flow - Create a Binary Tree Manually

Create root node

↓

Assign root value

↓

Create left child node?

No→Done

Yes↓

Assign left child value

↓

Create right child node?

No→Back to parent

Yes↓

Assign right child value

↓

Repeat for each node as needed

Start by creating the root node, then manually create and assign left and right child nodes step-by-step until the tree is built.

Execution Sample

DSA Typescript

class Node {
  constructor(public val: number, public left: Node | null = null, public right: Node | null = 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 adds left and right child nodes with values 2 and 3.

Execution Table

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

💡 All nodes manually created and assigned, tree construction 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 assign left and right children after creating the root node?

Because the root node must exist first to attach children. See execution_table steps 1 and 2 where root is created before assigning root.left.

What happens if we forget to assign a child node?

That child pointer remains null, meaning no node exists there. In the table, if root.right was not assigned, it would stay null and the tree would be incomplete.

Why do we manually create each node instead of using a loop?

Manual creation helps understand the structure clearly. Loops are used for larger trees, but here each step shows exactly how nodes connect, as in execution_table rows 2 and 3.

Visual Quiz - 3 Questions

Look at the execution_table, what is the visual state after step 2?

A 1 with right child 3 only

B 1 with both children 2 and 3

C 1 with left child 2 only

D Only root node 1

💡 Hint

Check the Visual State column in row for step 2 showing left child assigned only.

At which step is the right child node created and assigned?

A Step 3

B Step 2

C Step 1

D Step 4

💡 Hint

Look at the Operation and Pointer Changes columns in execution_table row 3.

If we skip step 3, what would root.right be in variable_tracker final state?

A Node(3)

B null

C Node(2)

D undefined

💡 Hint

See variable_tracker root.right value after step 2 and final if step 3 is skipped.

Concept Snapshot

Create a binary tree manually by:
- Creating the root node first
- Assigning left and right child nodes explicitly
- Each node has value, left, and right pointers
- Null means no child
- Build step-by-step for clear structure

Full Transcript

To create a binary tree manually, start by creating the root node with a value. Then assign its left and right children by creating new nodes and linking them to the root's left and right pointers. Each node holds a value and pointers to left and right children, which can be null if no child exists. This step-by-step manual creation helps visualize the tree structure clearly. The execution table shows each step with the nodes created and how pointers change, while the variable tracker shows the state of root and its children after each step. Key moments clarify why the root must be created first, what happens if children are not assigned, and why manual creation is useful for learning.

Practice

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

easy

A. To avoid using classes or objects

B. To automatically sort data without coding

C. To understand how nodes connect and form the tree structure

D. To create a linked list instead of a tree

Solution

1. Step 1: Understand binary tree structure

   A binary tree consists of nodes where each node has at most two children, left and right.

2. Step 2: Purpose of manual creation

   Manually creating a binary tree helps visualize and understand how nodes connect to form the tree.

3. Final Answer:

   To understand how nodes connect and form the tree structure -> Option C

4. Quick Check:

   Manual creation = Understand tree structure [OK]

Hint: Manual creation helps visualize node connections [OK]

Common Mistakes:

• Thinking it automatically sorts data
• Confusing binary tree with linked list
• Assuming no objects or classes are needed

2. Which of the following is the correct way to define a binary tree node class in TypeScript?

easy

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

B. class Node { value: number; left: number; right: number; constructor(value: number) { this.value = value; this.left = 0; this.right = 0; } }

C. class Node { value: number; left: Node; right: Node; constructor(value: number) { this.value = value; } }

D. class Node { value: number; left: any; right: any; constructor() { this.value = 0; } }

Solution

1. Step 1: Check node properties and types

   A binary tree node should have a value and left/right children which can be nodes or null.

2. Step 2: Verify constructor initialization

   Constructor must initialize value and set left and right to null initially.

3. Final Answer:

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

4. Quick Check:

   Node class with nullable children = class Node { value: number; left: Node | null; right: Node | null; constructor(value: number) { this.value = value; this.left = null; this.right = null; } } [OK]

Hint: Children must be Node or null, initialized in constructor [OK]

Common Mistakes:

• Using number type for left/right instead of Node or null
• Not initializing left and right to null
• Omitting constructor parameters

3. Given the following TypeScript code to create a binary tree manually, what will be the output of console.log(root.left?.value)?

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

const root = new Node(10);
root.left = new Node(5);
root.right = new Node(15);

medium

A. 5

B. 10

C. 15

D. undefined

Solution

1. Step 1: Understand tree structure from code

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

2. Step 2: Access left child's value

   root.left?.value accesses left node's value safely, which is 5.

3. Final Answer:

   5 -> Option A

4. Quick Check:

   root.left.value = 5 [OK]

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

Common Mistakes:

• Confusing root value with left child value
• Expecting right child value instead
• Not using optional chaining and getting error

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

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

const root = new Node(10);
root.left = 5;
root.right = new Node(15);

medium

A. Missing constructor parameters in Node class

B. Using wrong class name for Node

C. Not initializing root.right

D. Assigning number 5 to root.left instead of a Node or null

Solution

1. Step 1: Check type of root.left assignment

   root.left is declared as Node or null, but assigned number 5 which is invalid.

2. Step 2: Confirm correct assignment type

   root.left should be assigned a Node instance or null, not a number.

3. Final Answer:

   Assigning number 5 to root.left instead of a Node or null -> Option D

4. Quick Check:

   Type mismatch in root.left assignment = Assigning number 5 to root.left instead of a Node or null [OK]

Hint: Children must be Node or null, not a number [OK]

Common Mistakes:

• Assigning primitive values to node children
• Ignoring type errors in assignments
• Assuming number can be assigned directly

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

hard

A. const root = new Node(20);
root.left = 10;
root.right = 30;
console.log(root.value, root.left, root.right);

B. const root = new Node(20);
root.left = new Node(10);
root.right = new Node(30);
console.log(root.value, root.left?.value, root.right?.value);

C. const root = new Node(20);
root.left = new Node(30);
root.right = new Node(10);
console.log(root.value, root.left?.value, root.right?.value);

D. const root = new Node(20);
root.left = null;
root.right = null;
console.log(root.left?.value, root.value, root.right?.value);

Solution

1. Step 1: Create root and children nodes correctly

   Root node with value 20, left child 10, right child 30 must be Node instances.

2. Step 2: Print values in order root, left, right

   console.log prints root.value, root.left?.value, root.right?.value which outputs 20 10 30.

3. Final Answer:

   const root = new Node(20); root.left = new Node(10); root.right = new Node(30); console.log(root.value, root.left?.value, root.right?.value); -> Option B

4. Quick Check:

   Correct node creation and print order = const root = new Node(20); root.left = new Node(10); root.right = new Node(30); console.log(root.value, root.left?.value, root.right?.value); [OK]

Hint: Create nodes with new, assign children as nodes, print values [OK]

Common Mistakes:

• Assigning numbers directly to children
• Swapping left and right child values
• Printing children before root or using null children