Create a Binary Tree Manually in DSA Javascript

Mental Model

A binary tree is a structure where each item can have up to two children, left and right. We build it by linking nodes manually one by one.

Analogy: Think of a family tree where each person can have up to two children. You add each person and connect them to their parents to form the tree.

    1
   / \
 null null

Dry Run Walkthrough

Input: Create a binary tree with root 1, left child 2, and right child 3

Goal: Build the tree manually by creating nodes and linking them correctly

Step 1: Create root node with value 1

    1
   / \
 null null

Why: Start with the root node as the base of the tree

Step 2: Create left child node with value 2 and link to root's left

    1
   / \
  2  null
 / \
null null

Why: Add left child to root to build the left subtree

Step 3: Create right child node with value 3 and link to root's right

    1
   / \
  2   3
 / \ / \
null null null null

Why: Add right child to root to complete the tree

Result:

    1
   / \
  2   3
 / \ / \
null null null null

Annotated Code

DSA Javascript

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

function createManualBinaryTree() {
  const root = new TreeNode(1); // create root node
  root.left = new TreeNode(2); // link left child
  root.right = new TreeNode(3); // link right child
  return root;
}

function printTree(node) {
  if (!node) return 'null';
  const left = printTree(node.left);
  const right = printTree(node.right);
  return `${node.value} -> (${left}, ${right})`;
}

const tree = createManualBinaryTree();
console.log(printTree(tree));

const root = new TreeNode(1); // create root node

create the root node as the starting point

root.left = new TreeNode(2); // link left child

attach left child node to root

root.right = new TreeNode(3); // link right child

attach right child node to root

if (!node) return 'null';

base case for printing: no node means null

const left = printTree(node.left);

recursively print left subtree

const right = printTree(node.right);

recursively print right subtree

Output

1 -> (2 -> (null, null), 3 -> (null, null))

Complexity Analysis

Time: O(n) because we create and print each node once

Space: O(n) because we store all nodes and recursion stack for printing

vs Alternative: Manual creation is simple and direct compared to building from arrays or traversals which need extra parsing

Edge Cases

Empty tree (no nodes)

The root is null and print returns 'null'

DSA Javascript

if (!node) return 'null';

Single node tree

Only root exists with left and right as null

DSA Javascript

const root = new TreeNode(1);

When to Use This Pattern

When you need to build a binary tree from scratch or small fixed data, manually creating nodes and linking is the simplest approach.

Common Mistakes

Mistake: Forgetting to link left or right child nodes after creating them
Fix: Always assign the new node to root.left or root.right explicitly

Mistake: Confusing left and right children positions
Fix: Remember left child goes to root.left and right child to root.right

Summary

Manually create each node and link left and right children to build a binary tree.

Use this when you have a small tree or want full control over node connections.

The key is to create nodes first, then connect them step-by-step to form the tree.

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