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.

Practice

1. Which data structure is best suited to represent a family tree where each person can have multiple children?

easy

A. Stack

B. Array

C. Linked List

D. Tree

Solution

1. Step 1: Understand the hierarchy requirement

   A family tree has a parent-child relationship with multiple children per parent, which is a hierarchical structure.

2. Step 2: Match data structure to hierarchy

   Trees naturally represent hierarchical data with nodes and branches, allowing multiple children per node.

3. Final Answer:

   Tree -> Option D

4. Quick Check:

   Hierarchy with multiple children = Tree [OK]

Hint: Hierarchy with multiple children? Use Tree [OK]

Common Mistakes:

• Choosing Array which is linear, not hierarchical
• Choosing Linked List which supports only one next node
• Confusing Stack with hierarchical structure

2. Which of the following is the correct way to declare a linked list node in JavaScript?

easy

A. const node = { value: 5, next: null };

B. const node = [5, null];

C. const node = new Array(5, null);

D. const node = { next: 5, value: null };

Solution

1. Step 1: Understand linked list node structure

   A linked list node typically has a value and a pointer to the next node (next).

2. Step 2: Check each option for correct syntax

   const node = { value: 5, next: null }; correctly uses an object with 'value' and 'next' keys. Others either use arrays or swap keys incorrectly.

3. Final Answer:

   const node = { value: 5, next: null }; -> Option A

4. Quick Check:

   Linked list node = object with value and next [OK]

Hint: Linked list node = object with value and next [OK]

Common Mistakes:

• Using arrays instead of objects for nodes
• Swapping value and next keys
• Using Array constructor incorrectly

3. What will be the output of the following JavaScript code that builds a simple tree structure?

const tree = {
  value: 'root',
  children: [
    { value: 'child1', children: [] },
    { value: 'child2', children: [
      { value: 'grandchild1', children: [] }
    ] }
  ]
};

console.log(tree.children[1].children[0].value);

medium

A. "grandchild1"

B. "child2"

C. "child1"

D. undefined

Solution

1. Step 1: Trace the tree object structure

   The root has two children: 'child1' and 'child2'. 'child2' has one child: 'grandchild1'.

2. Step 2: Access the nested value

   tree.children[1] is 'child2', its children[0] is 'grandchild1', so accessing value gives 'grandchild1'.

3. Final Answer:

   "grandchild1" -> Option A

4. Quick Check:

   tree.children[1].children[0].value = "grandchild1" [OK]

Hint: Follow children indices step-by-step [OK]

Common Mistakes:

• Confusing child indices (0 vs 1)
• Assuming children is a single node, not array
• Accessing wrong property name

4. The following code attempts to create a linked list but has an error. What is the error?

const node1 = { value: 1, next: null };
const node2 = { value: 2, next: null };
node1.next = node2;
node2.next = node1;
console.log(node1.next.next.value);

medium

A. node2.next should be null, not node1

B. node1.next is null, so accessing next.next causes error

C. It creates an infinite loop by linking nodes circularly

D. Syntax error in object declaration

Solution

1. Step 1: Analyze the linked list connections

   node1.next points to node2, and node2.next points back to node1, creating a circular link.

2. Step 2: Understand the effect of circular links

   Accessing node1.next.next.value goes from node1 to node2, then back to node1, causing infinite traversal if looped.

3. Final Answer:

   It creates an infinite loop by linking nodes circularly -> Option C

4. Quick Check:

   Circular links cause infinite loops [OK]

Hint: Check if next points back to previous node [OK]

Common Mistakes:

• Ignoring circular reference causing infinite loop
• Assuming next.next is null
• Thinking it's a syntax error

5. You have a nested array representing a company's hierarchy like this:

const company = [
  { name: 'CEO', reports: [
    { name: 'Manager1', reports: [] },
    { name: 'Manager2', reports: [
      { name: 'Employee1', reports: [] }
    ] }
  ] }
];

Which data structure would be best to convert this into for efficient traversal and why?

hard

A. Convert to a Linked List because it allows easy sequential access to employees.

B. Convert to a Tree because it naturally represents hierarchical relationships with multiple children.

C. Convert to a flat Array because arrays are faster to traverse than trees.

D. Convert to a Stack because it helps in depth-first traversal.

Solution

1. Step 1: Understand the nested array structure

   The company hierarchy has multiple levels with managers and employees reporting to them, forming a hierarchy.

2. Step 2: Choose data structure matching hierarchy and traversal needs

   Trees represent hierarchical data with nodes and children, making traversal and queries efficient and natural.

3. Final Answer:

   Convert to a Tree because it naturally represents hierarchical relationships with multiple children. -> Option B

4. Quick Check:

   Hierarchical data = Tree for efficient traversal [OK]

Hint: Hierarchy with multiple levels? Use Tree [OK]

Common Mistakes:

• Choosing Linked List which is linear, not hierarchical
• Choosing flat Array losing hierarchy info
• Confusing Stack with data structure for storage