Tree vs Array vs Linked List When Hierarchy Matters in DSA Javascript - Trade-offs & Analysis

Mental Model

A tree shows clear parent-child links for hierarchy, arrays list items flatly, and linked lists chain items linearly.

Analogy: Think of a family tree (tree) showing parents and children, a photo album (array) showing pictures side by side, and a treasure hunt path (linked list) where you follow clues one after another.

Tree:
    1
   / \
  2   3
 / \
4   5

Array:
[1][2][3][4][5]

Linked List:
1 -> 2 -> 3 -> 4 -> 5 -> null

Dry Run Walkthrough

Input: Tree with nodes 1 as root, 2 and 3 as children of 1, 4 and 5 as children of 2; Array with elements [1,2,3,4,5]; Linked List with nodes 1->2->3->4->5

Goal: Show how hierarchy is represented differently and why tree is best for parent-child relationships

Step 1: Look at tree root node 1 with children 2 and 3

Tree:
    1 ↑
   / \
  2   3
Array:
[1][2][3][4][5]
Linked List:
1 -> 2 -> 3 -> 4 -> 5 -> null

Why: Tree shows direct parent-child links, array and linked list do not

Step 2: Move to node 2 in tree, which has children 4 and 5

Tree:
    1
   / \
  2 ↑  3
 / \
4   5
Array:
[1][2][3][4][5]
Linked List:
1 -> 2 -> 3 -> 4 -> 5 -> null

Why: Tree keeps hierarchy clear with branches; array and linked list are flat or linear

Step 3: Try to find children of node 2 in array and linked list

Tree:
    1
   / \
  2    3
 / \
4    5
Array:
[1][2][3][4][5]
Linked List:
1 -> 2 -> 3 -> 4 -> 5 -> null

Why: Array and linked list have no direct parent-child links, so hierarchy is lost

Result:

Tree:
    1
   / \
  2   3
 / \
4   5
Array:
[1][2][3][4][5]
Linked List:
1 -> 2 -> 3 -> 4 -> 5 -> null

Answer: Tree best shows hierarchy with parent-child links; array and linked list do not.

Annotated Code

DSA Javascript

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

class LinkedListNode {
  constructor(value) {
    this.value = value;
    this.next = null;
  }
}

// Build tree
const root = new TreeNode(1);
const node2 = new TreeNode(2);
const node3 = new TreeNode(3);
const node4 = new TreeNode(4);
const node5 = new TreeNode(5);
root.children.push(node2, node3);
node2.children.push(node4, node5);

// Build array
const array = [1, 2, 3, 4, 5];

// Build linked list
const head = new LinkedListNode(1);
head.next = new LinkedListNode(2);
head.next.next = new LinkedListNode(3);
head.next.next.next = new LinkedListNode(4);
head.next.next.next.next = new LinkedListNode(5);

function printTree(node, indent = '') {
  if (!node) return '';
  let result = indent + node.value + '\n';
  for (const child of node.children) {
    result += printTree(child, indent + '  ');
  }
  return result;
}

function printArray(arr) {
  return '[' + arr.join('][') + ']';
}

function printLinkedList(head) {
  let result = '';
  let curr = head;
  while (curr) {
    result += curr.value + ' -> ';
    curr = curr.next;
  }
  return result + 'null';
}

console.log('Tree:');
console.log(printTree(root));
console.log('Array:');
console.log(printArray(array));
console.log('Linked List:');
console.log(printLinkedList(head));

root.children.push(node2, node3);

link root to its children to build hierarchy

node2.children.push(node4, node5);

link node2 to its children to extend hierarchy

while (curr) { result += curr.value + ' -> '; curr = curr.next; }

traverse linked list nodes one by one to print linear order

for (const child of node.children) { result += printTree(child, indent + ' '); }

recursively print each child with indentation to show tree structure

Output

Tree:

1

  2

    4

    5

  3

Array:

[1][2][3][4][5]

Linked List:

1 -> 2 -> 3 -> 4 -> 5 -> null

Complexity Analysis

Time: O(n) because we visit each node or element once to print or build

Space: O(n) because we store all nodes/elements in memory

vs Alternative: Tree uses extra pointers for children but shows hierarchy clearly; array and linked list use less memory but lose parent-child info

Edge Cases

Empty tree, array, or linked list

Print functions handle empty input gracefully without errors

DSA Javascript

function printTree(node, indent = '') { if (!node) return ''; }

Single node/tree with one element

Prints single element correctly showing minimal hierarchy or linear structure

DSA Javascript

root.children.push(node2, node3); // can be empty array

When to Use This Pattern

When you need to represent or traverse data with clear parent-child relationships, choose a tree structure because arrays and linked lists do not keep hierarchy.

Common Mistakes

Mistake: Trying to represent hierarchy using only arrays or linked lists without extra info
Fix: Use tree nodes with children pointers to explicitly store parent-child links

Mistake: Confusing linear order in linked list with hierarchical order
Fix: Remember linked list is a chain, not a branching structure

Summary

Shows how trees keep parent-child hierarchy, arrays list items flatly, and linked lists chain items linearly.

Use trees when you need to represent hierarchical relationships clearly.

The key insight is that only trees have explicit links for parent and multiple children, making hierarchy visible.