Tree vs Array vs Linked List When Hierarchy Matters in DSA Javascript - Build Both Approaches

Tree vs Array vs Linked List When Hierarchy Matters

📖 Scenario: Imagine you are organizing a company's employee structure. Each employee can have subordinates, forming a hierarchy. You want to represent this hierarchy in different ways to understand how data structures like arrays, linked lists, and trees work when hierarchy matters.

🎯 Goal: You will create three data structures to represent the same employee hierarchy: an array of employees, a linked list of employees, and a tree of employees. Then, you will write code to display the hierarchy clearly.

📋 What You'll Learn

Create an array called employeesArray with employee names in order

Create a linked list called employeesLinkedList representing the same employees

Create a tree called employeesTree representing the hierarchy with subordinates

Write code to print the array, linked list, and tree hierarchy

💡 Why This Matters

🌍 Real World

Organizing company employees, file systems, or categories often needs hierarchical data structures like trees.

💼 Career

Understanding arrays, linked lists, and trees helps in software development, especially in building user interfaces, databases, and organizational tools.

1

Create an array of employees

Create an array called employeesArray with these exact employee names in order: 'CEO', 'Manager', 'Team Lead', 'Developer', 'Intern'.

DSA Javascript

# Create the array employeesArray with the given employee names
// Your code here

Hint

Use square brackets [] to create an array and put the employee names as strings inside.

2

Create a linked list of employees

Create a linked list by defining a class called Node with properties name and next. Then create nodes for each employee in this order: 'CEO', 'Manager', 'Team Lead', 'Developer', 'Intern'. Link them so that CEO points to Manager, and so on. Store the head node in a variable called employeesLinkedList.

DSA Javascript

const employeesArray = ['CEO', 'Manager', 'Team Lead', 'Developer', 'Intern'];
// Define Node class and create linked list nodes
// Your code here

Hint

Create a Node class with name and next. Then create nodes and link them by setting next properties.

3

Create a tree representing the employee hierarchy

Create an object called employeesTree representing the hierarchy: CEO is the root with one child Manager. Manager has one child Team Lead. Team Lead has two children: Developer and Intern. Use the property name for employee name and subordinates as an array of child nodes.

DSA Javascript

const employeesArray = ['CEO', 'Manager', 'Team Lead', 'Developer', 'Intern'];

class Node {
  constructor(name) {
    this.name = name;
    this.next = null;
  }
}

const ceo = new Node('CEO');
const manager = new Node('Manager');
const teamLead = new Node('Team Lead');
const developer = new Node('Developer');
const intern = new Node('Intern');

ceo.next = manager;
manager.next = teamLead;
teamLead.next = developer;
developer.next = intern;

const employeesLinkedList = ceo;

// Create employeesTree object with name and subordinates
// Your code here

Hint

Use nested objects with name and subordinates arrays to build the tree hierarchy.

4

Print the array, linked list, and tree hierarchy

Write code to print the employeesArray as a string joined by ' -> '. Then print the linked list starting from employeesLinkedList by traversing nodes and joining names with ' -> '. Finally, write a recursive function called printTree that prints the employeesTree hierarchy with indentation for subordinates. Call printTree(employeesTree, 0) to display the tree.

DSA Javascript

const employeesArray = ['CEO', 'Manager', 'Team Lead', 'Developer', 'Intern'];

class Node {
  constructor(name) {
    this.name = name;
    this.next = null;
  }
}

const ceo = new Node('CEO');
const manager = new Node('Manager');
const teamLead = new Node('Team Lead');
const developer = new Node('Developer');
const intern = new Node('Intern');

ceo.next = manager;
manager.next = teamLead;
teamLead.next = developer;
developer.next = intern;

const employeesLinkedList = ceo;

const employeesTree = {
  name: 'CEO',
  subordinates: [
    {
      name: 'Manager',
      subordinates: [
        {
          name: 'Team Lead',
          subordinates: [
            { name: 'Developer', subordinates: [] },
            { name: 'Intern', subordinates: [] }
          ]
        }
      ]
    }
  ]
};

// Print employeesArray, employeesLinkedList, and employeesTree
// Your code here

Hint

Use join(' -> ') for array, a while loop for linked list, and a recursive function with indentation for the tree.

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