Tree vs Array vs Linked List When Hierarchy Matters in DSA Typescript - Visual Comparison

Concept Flow - Tree vs Array vs Linked List When Hierarchy Matters

Start: Need to store data with hierarchy

↓

Choose Data Structure Type

↓

Array

↓

Flat list

↓

No hierarchy

↓

Limited for hierarchy

This flow shows how choosing between array, linked list, and tree depends on whether hierarchy matters in data storage.

Execution Sample

DSA Typescript

class TreeNode {
  value: number;
  children: TreeNode[];
  constructor(value: number) {
    this.value = value;
    this.children = [];
  }
}

Defines a tree node with a value and a list of children to represent hierarchy.

Execution Table

Step	Operation	Nodes in Structure	Pointer Changes	Visual State
1	Create root node with value 1	1 node: [1]	root -> node(1)	1
2	Add child node with value 2 to root	2 nodes: [1, 2]	root.children[0] -> node(2)	1 └─ 2
3	Add child node with value 3 to root	3 nodes: [1, 2, 3]	root.children[1] -> node(3)	1 ├─ 2 └─ 3
4	Add child node with value 4 to node 2	4 nodes: [1, 2, 3, 4]	node(2).children[0] -> node(4)	1 ├─ 2 │ └─ 4 └─ 3
5	Compare with array storing [1, 2, 3, 4]	4 elements: [1, 2, 3, 4]	No pointers, flat structure	[1, 2, 3, 4]
6	Compare with linked list storing 1 -> 2 -> 3 -> 4	4 nodes: 1 -> 2 -> 3 -> 4	Pointers: node1.next -> node2, node2.next -> node3, node3.next -> node4	1 -> 2 -> 3 -> 4 -> null
7	Hierarchy matters: tree shows parent-child clearly	4 nodes in tree	Pointers show children per node	1 ├─ 2 │ └─ 4 └─ 3
8	Hierarchy matters: array and linked list show flat or linear only	4 elements/nodes	No parent-child pointers	Array: [1, 2, 3, 4] Linked List: 1 -> 2 -> 3 -> 4 -> null
9	End comparison	Structures built	Pointers set as above	Tree best for hierarchy

💡 Comparison ends after showing how tree, array, and linked list represent hierarchy differently.

Variable Tracker

Variable	Start	After 1	After 2	After 3	After 4	Final
root	null	node(1)	node(1)	node(1)	node(1)	node(1)
root.children	[]	[]	[node(2)]	[node(2), node(3)]	[node(2), node(3)]	[node(2), node(3)]
node(2).children	[]	[]	[]	[]	[node(4)]	[node(4)]
array	[]	[1]	[1, 2]	[1, 2, 3]	[1, 2, 3, 4]	[1, 2, 3, 4]
linkedList	null	1 -> null	1 -> 2 -> null	1 -> 2 -> 3 -> null	1 -> 2 -> 3 -> 4 -> null	1 -> 2 -> 3 -> 4 -> null

Key Moments - 3 Insights

Why can't arrays show parent-child relationships clearly?

Arrays store elements in a flat sequence without pointers to children, so they cannot represent hierarchy as shown in execution_table rows 5 and 8.

Why is a tree better than a linked list when hierarchy matters?

Trees have nodes with multiple children pointers, allowing parent-child links, unlike linked lists which only have a single next pointer, as seen in execution_table rows 6 and 7.

How does adding a child to a tree node change the structure?

Adding a child updates the parent's children array pointer, creating a visible branch in the tree structure, shown in execution_table rows 2, 3, and 4.

Visual Quiz - 3 Questions

Look at the execution_table at step 4, what is the visual state of the tree?

A 1 ├─ 2 │ └─ 4 └─ 3

B 1 -> 2 -> 3 -> 4 -> null

C [1, 2, 3, 4]

D 1 └─ 2 └─ 3 └─ 4

💡 Hint

Check the Visual State column at step 4 in execution_table.

At which step does the linked list reach 1 -> 2 -> 3 -> 4 -> null?

A Step 5

B Step 6

C Step 7

D Step 8

💡 Hint

Look at the Pointer Changes and Visual State columns for linked list in execution_table.

If we remove node 4 from the tree, how would the variable_tracker change for node(2).children?

A It remains [node(4)]

B It becomes null

C It becomes [] after removal

D It becomes [node(3)]

💡 Hint

Refer to variable_tracker row for node(2).children and think about removing the child node.

Concept Snapshot

Tree vs Array vs Linked List when hierarchy matters:
- Array: flat list, no hierarchy pointers
- Linked List: linear nodes with next pointer
- Tree: nodes with multiple children pointers
- Use tree to represent parent-child relationships clearly
- Arrays and linked lists are limited for hierarchical data

Full Transcript

This lesson compares tree, array, and linked list data structures focusing on how they represent hierarchy. Arrays store data in a flat sequence without pointers, so they cannot show parent-child relationships. Linked lists connect nodes linearly with a single next pointer, which also limits hierarchy representation. Trees have nodes with multiple children pointers, allowing clear parent-child links. The execution table shows step-by-step building of a tree with nodes 1, 2, 3, and 4, and compares it to arrays and linked lists storing the same values. Variable tracking shows how pointers and children arrays change as nodes are added. Key moments clarify why trees are best for hierarchical data and how adding children changes the structure. Visual quizzes test understanding of tree structure visualization, linked list state, and effects of removing nodes. The quick snapshot summarizes when to use each structure based on hierarchy needs.