DSA Trees — Fundamentals Visualized
Learn tree fundamentals — root, parent, child, leaf, height, hierarchical structure with interactive visualizer and real-world file system examples.
Introduction
Trees are hierarchical structures — unlike arrays and linked lists that sequence data, trees branch in multiple directions from a single root.
File systems, the DOM, org charts, and decision flows are all trees.
Quick index
| # | Section |
|---|---|
| 1 | How trees work |
| 2 | Interactive visualizer |
| 3 | Full implementation |
| 4 | Terminology |
| 5 | vs linear structures |
| 6 | Real-life examples |
1. How trees work
R
/ | \
A B C
/| /||\
D E F G H IUnlike linear structures, each node can have multiple children — data branches instead of sequencing.
2. Interactive visualizer
Trees — Fundamentals
Root, parent, child, leaf — hierarchical structures that branch instead of sequencing.
Root R has three children — trees branch in many directions unlike linear lists.
Tree node
class TreeNode {
constructor(value) {
this.value = value
this.children = []
}
}Each node holds a value and a list of child references.
Root
1
Leaves
6
Height
2
3. Full implementation
class TreeNode {
constructor(value) {
this.value = value
this.children = []
}
}
function buildSampleTree() {
const root = new TreeNode('R')
const a = new TreeNode('A')
const b = new TreeNode('B')
const c = new TreeNode('C')
a.children.push(new TreeNode('D'), new TreeNode('E'))
c.children.push(new TreeNode('F'), new TreeNode('G'), new TreeNode('H'), new TreeNode('I'))
root.children.push(a, b, c)
return root
}
function find(node, target) {
if (!node) return null
if (node.value === target) return node
for (const child of node.children) {
const found = find(child, target)
if (found) return found
}
return null
}
function height(node) {
if (!node) return -1
if (node.children.length === 0) return 0
return 1 + Math.max(...node.children.map(height))
}
function preOrderWalk(node, out = []) {
if (!node) return out
out.push(node.value)
for (const child of node.children) preOrderWalk(child, out)
return out
}Function calls with output
// ── Demo calls — output shown on the right ──
const root = buildSampleTree()
find(root, 'G') // → TreeNode { value: 'G' }
find(root, 'Z') // → null
height(root) // → 2
preOrderWalk(root) // → ['R','A','D','E','B','C','F','G','H','I']
root.children.length // → 34. Terminology
| Term | Meaning |
|---|---|
| Root | Top node — single entry point |
| Parent | Node with children |
| Child | Node directly below a parent |
| Leaf | Node with no children |
| Height | Longest path from root to any leaf |
| Depth | Edges from root to a given node |
5. vs linear structures
| Structure | Access pattern | Best for |
|---|---|---|
| Array | Index O(1) | Sequential data |
| Linked list | Head-to-tail | Dynamic sequence |
| Tree | Root-to-leaf paths | Hierarchy, branching |
6. Real-life examples
| Scenario | Tree role |
|---|---|
| File system | Directories branch into subdirectories and files |
| DOM | HTML elements nest as parent/child nodes |
| Org chart | CEO → VPs → managers → employees |
| JSON | Nested objects form a tree |
File system directory tree
Folders branch into subfolders and files — classic tree hierarchy.
/
├── src/
├── public/
└── package.json
Root "/" has children — directories and files.
Real-world implementation
class FileNode {
constructor(name, isDir = false) {
this.name = name; this.isDir = isDir; this.children = []
}
addChild(node) { if (this.isDir) this.children.push(node) }
find(name) {
if (this.name === name) return this
for (const c of this.children) { const f = c.find(name); if (f) return f }
return null
}
}Full working code for the scenario above.
Function calls with output
| // ── Function calls with output ── | |
| const root = new FileNode("/", true) | |
| root.addChild(new FileNode("src", true)) | → 1 child |
Side output shows return value after each call — step through to trace execution.
Summary
Trees model hierarchical branching — one root, many paths. Next: restrict to two children with Binary Trees.
Next reads: Binary Trees · Pre-order Traversal
Subscribe to my newsletter
Stay up to date and get notified when I share new contents.
No spam ever, unsubscribe anytime