When learning about data structures, one of the most fundamental and fun ones to explore is the Binary Tree. Trees are hierarchical data structures that allow us to represent data with relationships — think file directories, organization charts, or even a decision-making process.

In this post, we’re going to:

Create a custom binary tree of a given height using user inputs
Traverse the tree using Pre-Order, Post-Order, and In-Order techniques
Understand the logic behind each step

Let’s dive in! 🏊‍♂️

🌱 The Tree Node Class

First, we define a simple TreeNode class that represents each node in our binary tree.

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

Each node has:

data: the value of the node
left: a reference to the left child
right: a reference to the right child

🏗️ Build Tree by Height

Now comes the fun part — building the tree level by level based on the height you specify. The height is the number of levels in your tree, including the root.

function buildTreeByHeight(height) {
    if (height <= 0) return null;

    const listOfNodes = [];
    const rootValue = parseInt(prompt('Enter root node value : '));
    const root = new TreeNode(rootValue);
    listOfNodes.push(root);

    let currentLevel = 1;

    while (currentLevel < height) {
        const levelSize = listOfNodes.length;

        for (let i = 0; i < levelSize; i++) {
            const currentNode = listOfNodes.shift();

            let leftValue = parseInt(prompt(`Enter the left value of ${currentNode.data} (or leave blank):`));
            if (leftValue) {
                const leftNode = new TreeNode(leftValue);
                currentNode.left = leftNode;
                listOfNodes.push(leftNode);
            }

            let rightValue = parseInt(prompt(`Enter the right value of ${currentNode.data} (or leave blank):`));
            if (rightValue) {
                const rightNode = new TreeNode(rightValue);
                currentNode.right = rightNode;
                listOfNodes.push(rightNode);
            }
        }

        ++currentLevel;
    }

    return root;
}

💡 How it works:

You start with a root node.
For each level up to the specified height, you add left and right children to existing nodes.
The prompt function grabs user input (use this in a browser environment!).

🌳 Let’s Build!

const height = parseInt(prompt('Enter the height of tree : '));
const customtree = buildTreeByHeight(height);
console.log('my tree : ', customtree);

Now that your tree is built, you can see its structure in the console.

🔁 Tree Traversals

1. Pre-Order Traversal (Root ➡️ Left ➡️ Right)

function preOrderTraversal(treeNode) {
    if (treeNode) {
        console.log('Node:', treeNode.data);
        preOrderTraversal(treeNode.left);
        preOrderTraversal(treeNode.right);
    }
}

2. Post-Order Traversal (Left ➡️ Right ➡️ Root)

function postOderTraversal(treeNode) {
    if (treeNode) {
        postOderTraversal(treeNode.left);
        postOderTraversal(treeNode.right);
        console.log('Node:', treeNode.data);
    }
}

3. In-Order Traversal (Left ➡️ Root ➡️ Right)

function inOrderTraversal(treeNode) {
    if (treeNode) {
        inOrderTraversal(treeNode.left);
        console.log('Node:', treeNode.data);
        inOrderTraversal(treeNode.right);
    }
}

🧪 Now run all three traversals:

preOrderTraversal(customtree);
postOderTraversal(customtree);
inOrderTraversal(customtree);

✅ Conclusion

This mini project is a great way to get hands-on with:

Tree construction
User input
Depth-based control
Recursive traversal algorithms

Try building trees with different heights and node values to really get comfortable. You’ll start recognizing patterns in how nodes are connected and visited.

🌳 Building a Custom Binary Tree by Height in JavaScript (with Traversals)