Why Trees Exist and What Linked Lists and Arrays Cannot Do in DSA Javascript - See It Work

Why Trees Exist and What Linked Lists and Arrays Cannot Do

📖 Scenario: Imagine you are organizing a family reunion. You want to keep track of family members and their relationships, like parents and children. Using simple lists or arrays makes it hard to show these connections clearly. Trees help us organize such data naturally.

🎯 Goal: You will build a simple tree structure using JavaScript objects to represent family members and their children. This will show why trees are useful when linked lists and arrays cannot easily represent hierarchical relationships.

📋 What You'll Learn

Create a JavaScript object called familyTree representing a root family member with children.

Add a variable called rootName to store the root member's name.

Write a function called getChildrenNames that returns an array of the root member's children names.

Print the root member's name and the list of children names.

💡 Why This Matters

🌍 Real World

Trees are used to represent data with hierarchy like file systems, organization charts, and family trees.

💼 Career

Understanding trees is essential for software development roles involving data organization, search algorithms, and UI component trees.

1

Create the family tree object

Create a JavaScript object called familyTree with a name property set to 'Grandparent' and a children property which is an array containing two objects. The first child object should have name set to 'Parent1' and an empty children array. The second child object should have name set to 'Parent2' and an empty children array.

DSA Javascript

# Your code here

Hint

Use nested objects and arrays to represent the family tree structure.

2

Add a variable for the root member's name

Create a variable called rootName and set it to the name property of the familyTree object.

DSA Javascript

const familyTree = {
  name: 'Grandparent',
  children: [
    { name: 'Parent1', children: [] },
    { name: 'Parent2', children: [] }
  ]
};

// Your code here

Hint

Access the name property of the familyTree object and assign it to rootName.

3

Write a function to get children names

Write a function called getChildrenNames that takes the familyTree object as a parameter and returns an array of the name properties of its children.

DSA Javascript

const familyTree = {
  name: 'Grandparent',
  children: [
    { name: 'Parent1', children: [] },
    { name: 'Parent2', children: [] }
  ]
};

const rootName = familyTree.name;

// Your code here

Hint

Use the map method on the children array to get their names.

4

Print the root name and children names

Print the rootName variable and then print the result of calling getChildrenNames(familyTree).

DSA Javascript

const familyTree = {
  name: 'Grandparent',
  children: [
    { name: 'Parent1', children: [] },
    { name: 'Parent2', children: [] }
  ]
};

const rootName = familyTree.name;

function getChildrenNames(tree) {
  return tree.children.map(child => child.name);
}

// Your code here

Hint

Use console.log to print the values.

Practice

1. Why do trees exist as a data structure when we already have arrays and linked lists?

easy

A. Because trees can represent hierarchical relationships which arrays and linked lists cannot.

B. Because trees use less memory than arrays and linked lists.

C. Because trees are easier to implement than arrays and linked lists.

D. Because trees always store data in sorted order unlike arrays and linked lists.

Solution

1. Step 1: Understand the limitation of arrays and linked lists

   Arrays and linked lists store data linearly, so they cannot naturally represent parent-child or hierarchical relationships.

2. Step 2: Identify the unique feature of trees

   Trees allow nodes to have multiple children, representing hierarchical data like file systems or organization charts.

3. Final Answer:

   Trees represent hierarchical relationships which arrays and linked lists cannot. -> Option A

4. Quick Check:

   Hierarchy needs trees = B [OK]

Hint: Trees model hierarchy; arrays and lists are linear [OK]

Common Mistakes:

• Thinking trees use less memory than arrays
• Believing trees are simpler to implement
• Assuming trees always store sorted data

2. Which of the following is the correct way to create a simple tree node object in JavaScript?

easy

A. const node = new TreeNode(5, []);

B. const node = { value: 5, children: [] };

C. const node = (value: 5, children: []);

D. const node = [5, []];

Solution

1. Step 1: Recall JavaScript object syntax

   Objects use curly braces with key-value pairs, like { key: value }.

2. Step 2: Check each option

   const node = { value: 5, children: [] }; uses correct object syntax with keys 'value' and 'children'. const node = [5, []]; is an array, not an object. const node = (value: 5, children: []); uses invalid syntax. const node = new TreeNode(5, []); assumes a class TreeNode which is not defined.

3. Final Answer:

   const node = { value: 5, children: [] }; -> Option B

4. Quick Check:

   JS object syntax = D [OK]

Hint: JS objects use curly braces with key-value pairs [OK]

Common Mistakes:

• Using array syntax instead of object
• Using invalid parentheses syntax
• Assuming class exists without definition

3. What will be the output of the following code that creates a simple tree and prints the root's first child's value?

const root = { value: 1, children: [ { value: 2, children: [] }, { value: 3, children: [] } ] };
console.log(root.children[0].value);

medium

A. undefined

B. 1

C. 3

D. 2

Solution

1. Step 1: Understand the tree structure

   The root node has value 1 and two children with values 2 and 3.

2. Step 2: Access the first child's value

   root.children[0] refers to the first child node with value 2, so root.children[0].value is 2.

3. Final Answer:

   2 -> Option D

4. Quick Check:

   root.children[0].value = 2 [OK]

Hint: Index 0 child value is root.children[0].value [OK]

Common Mistakes:

• Printing root.value instead of child's
• Using wrong index for children
• Confusing children array with object

4. Find the error in this code that tries to add a child node to a tree:

const root = { value: 10, children: [] };
root.children.push({ value: 20 });
console.log(root.children[0].value);

medium

A. The root node should not have a 'children' property.

B. The push method cannot be used on arrays.

C. The child node is missing the 'children' array property.

D. The console.log syntax is incorrect.

Solution

1. Step 1: Check the child node structure

   The child node added has only 'value' but no 'children' array, which breaks the tree node structure.

2. Step 2: Understand tree node consistency

   Each node should have a 'children' property as an array, even if empty, to maintain uniformity.

3. Final Answer:

   The child node is missing the 'children' array property. -> Option C

4. Quick Check:

   Missing children array in child node = A [OK]

Hint: Every tree node needs a children array [OK]

Common Mistakes:

• Thinking push is invalid on arrays
• Believing root shouldn't have children
• Assuming console.log syntax is wrong

5. You want to represent a company's organizational chart where each employee can have multiple subordinates. Which data structure is best and why compared to arrays or linked lists?

hard

A. Use a tree because it naturally models hierarchical relationships with multiple children per node.

B. Use an array because it allows fast access to any employee by index.

C. Use a linked list because it is simple and efficient for sequential access.

D. Use a stack because it stores employees in last-in-first-out order.

Solution

1. Step 1: Analyze the problem requirements

   The organizational chart has a hierarchy where each employee can have many subordinates, forming a tree-like structure.

2. Step 2: Compare data structures

   Arrays and linked lists are linear and cannot represent multiple children per node naturally. Trees allow each node to have multiple children, matching the hierarchy.

3. Final Answer:

   Use a tree because it naturally models hierarchical relationships with multiple children per node. -> Option A

4. Quick Check:

   Hierarchy with multiple children = tree = C [OK]

Hint: Hierarchy with multiple children needs trees, not linear lists [OK]

Common Mistakes:

• Choosing arrays for hierarchical data
• Using linked lists for multi-child nodes
• Confusing stack usage with hierarchy