MvsMAbout
EN • 23 ene 2026

Binary Trees: What They Are, Uses, and How to Create One with JavaScript/TypeScript

By Mariana Garcia Berrueta

This post introduces binary trees and explains how they work using simple examples. It covers their structure, main use cases like searching and priority queues, and shows how to create, represent, and rebuild a binary tree in JavaScript step by step.

What Is a Binary Tree?

A binary tree is a data structure made up of nodes. Each node (a piece of data) can have up to two branches: one to the left and one to the right.

A tree is built by connecting nodes in a hierarchical way, meaning some nodes are positioned above or below others.

A node that is above other nodes is called a parent node, and from it one or more child nodes are derived.

In the case of a binary tree, there are only two possible positions for the children of a parent node: left and right. For this reason, each node in a binary tree can have from 0 to 2 child nodes.

A node can have:

If you want to learn more about tree data structures in general, you can read my post “Data Structures: The Tree and Its Importance.”

Main Uses and Types of Binary Trees

Search Trees: Fast Search and Sorting

Imagine you need to find the contact David in your phone’s contact list, which contains 1,000 records. In a regular list, you would have to go through the contacts one by one until you find it.

If instead you organize your contacts in a binary search tree, you can drastically reduce the number of steps.

In this type of tree:

For example, if you have the names Carlos, Ariel, and David:

To search for David, you only ask:

“Is David greater than Carlos?”

Yes → go to the right and find it in a single step.

In large lists, this technique can save a lot of time.

Expression Trees

Expression trees are used to represent and evaluate mathematical and logical operations.

In these trees:

For example, a root node(first element in the tree) may represent the addition operation (+), and its two children may have the values 2 and 2. This represents the operation:

2 + 2

This type of tree is used in calculators, spreadsheets (such as Excel), and programming languages.

Binary Heap

A binary heap is used to implement priority queues.

Imagine you work in a hospital emergency room, where patients arrive continuously. A binary heap allows you to quickly identify the patient with the highest priority.

A heap is used instead of an array because it is more efficient for:

How to Create a Binary Tree with JavaScript

A tree is made up of nodes, so the simplest way to create one is to start by defining a class that represents a single node of the tree.

class BinaryTree {
  value: number
  left: BinaryTree | null
  right: BinaryTree | null

  constructor(value: number) {
    this.value = value
    this.left = null
    this.right = null
  }
}

This class defines three important elements:

If a node has no children, both left and rigth are null.

Creating a Binary Tree Manually

Creating a binary tree does not mean “creating the whole tree at once,” but rather creating nodes and connecting them.

For example, if we want a tree with:

First, we create the root node(the first element of the tree) and then assign its children by creating new instances of the BinaryTree class.

const root = new BinaryTree(5)
root.left = new BinaryTree(2)
root.right = new BinaryTree(10)

//               result
//                  5
//              2      10

Representing a Tree as Data (JSON)

Many times, we need to store a tree in a database or send it through an API. To do that, we represent the tree as JSON data.

Once we understand how to represent a tree as data, we will later see how to use our BinaryTree class to reconnect that data and make it functional again. For now…

Let’s consider a representation where, unlike our BinaryTree class, the nodes are not directly connected to each other, but instead reference one another by id.

In this case:

{
  "tree": {
    "nodes": [
      { "id": "1", "left": "2", "right": "3", "value": 45 },
      { "id": "2", "left": "4", "right": "5", "value": 30 },
      { "id": "3", "left": "6", "right": "7", "value": 8 }
      { "id": "4", "left": null, "right": null, "value": 2 }
      { "id": "5", "left": null, "right": null, "value": 56 }
      { "id": "6", "left": null, "right": null, "value": 34 }
      { "id": "7", "left": null, "right": null, "value": 89 }
    ],
    "root": "1"
  }
}

Converting the JSON Representation into a BinaryTree

To use algorithms (traversals, searches, recursion), we need to convert the data into real objects.

Step 1: Create a Node Map

First, we index the nodes by id to access them quickly by creating a new Map:

const nodeMap = new Map<string, any>()

for (const node of tree.nodes) {
  nodeMap.set(node.id, node)
}

A Map is similar to an object in that it stores key–value pairs.

In this example, the key is the node id and the value is the node itself.

Step 2: Build the Tree Recursively

Now we create a function called buildTree that, given an id, builds the node and its children recursively:

const buildTree = (id: string | null): BinaryTree | null => {
  if (!id) return null

  const node = nodeMap.get(id)
  if (!node) return null

  const treeNode = new BinaryTree(node.value)
  treeNode.left = buildTree(node.left)
  treeNode.right = buildTree(node.right)

  return treeNode
}

A recursive function is a function that calls itself until it reaches a base case. Here, we stop creating nodes when there are no more children.

Step 3: Create the Complete Tree

We call the function using the root property of our tree. Remember, root contains the id of the root node.

const tree = buildTree(tree.root)

Now we have a fully connected binary tree ready to be used in our code.

Good luck!

Related Posts