Nested objects in Javascript - Mini Project: Build & Apply

Nested objects

📖 Scenario: You are managing a small library system. Each book has details like title, author, and availability status inside nested objects.

🎯 Goal: You will create a nested object to store book information, add a configuration for checking availability, extract titles of available books, and finally display those titles.

📋 What You'll Learn

Create a nested object with exact book details

Add a variable to check if a book is available

Use a loop to collect titles of available books

Print the list of available book titles

💡 Why This Matters

🌍 Real World

Nested objects are common when storing detailed information like user profiles, product catalogs, or library systems.

💼 Career

Understanding nested objects and how to access them is essential for frontend and backend developers working with JSON data and APIs.

1

Create the nested object with book details

Create a constant object called library with two books: book1 and book2. Each book should be an object with these exact properties and values: title as a string, author as a string, and status as an object with a boolean property available. Use these exact values: book1: title "The Great Gatsby", author "F. Scott Fitzgerald", available true; book2: title "1984", author "George Orwell", available false.

Javascript

// Your code here

Hint

Remember to nest the status object inside each book object.

2

Add a variable to check availability

Create a constant called isAvailable and set it to the available property of book1 inside the library object.

Javascript

const library = {
  book1: {
    title: "The Great Gatsby",
    author: "F. Scott Fitzgerald",
    status: {
      available: true
    }
  },
  book2: {
    title: "1984",
    author: "George Orwell",
    status: {
      available: false
    }
  }
};
// Your code here

Hint

Access nested properties using dot notation like library.book1.status.available.

3

Collect titles of available books

Create an empty array called availableBooks. Use a for...in loop with variable bookKey to iterate over library. Inside the loop, check if library[bookKey].status.available is true. If yes, push library[bookKey].title into availableBooks.

Javascript

const library = {
  book1: {
    title: "The Great Gatsby",
    author: "F. Scott Fitzgerald",
    status: {
      available: true
    }
  },
  book2: {
    title: "1984",
    author: "George Orwell",
    status: {
      available: false
    }
  }
};

const isAvailable = library.book1.status.available;

// Your code here

Hint

Use for...in to loop over object keys and check nested properties inside the loop.

4

Display the available book titles

Write a console.log statement to print the availableBooks array.

Javascript

const library = {
  book1: {
    title: "The Great Gatsby",
    author: "F. Scott Fitzgerald",
    status: {
      available: true
    }
  },
  book2: {
    title: "1984",
    author: "George Orwell",
    status: {
      available: false
    }
  }
};

const isAvailable = library.book1.status.available;

const availableBooks = [];
for (const bookKey in library) {
  if (library[bookKey].status.available) {
    availableBooks.push(library[bookKey].title);
  }
}
// Your code here

Hint

Use console.log(availableBooks) to show the array in the console.

Practice

1. What is a nested object in JavaScript?

easy

A. An array inside an object

B. An object inside another object

C. A function inside an object

D. A string inside an object

Solution

1. Step 1: Understand object structure

   An object can hold many types of values, including other objects.

2. Step 2: Define nested object

   A nested object means one object is stored as a value inside another object.

3. Final Answer:

   An object inside another object -> Option B

4. Quick Check:

   Nested object = object inside object [OK]

Hint: Nested means inside another object, like boxes in boxes [OK]

Common Mistakes:

• Thinking nested means array inside object
• Confusing functions with objects
• Assuming nested means string inside object

2. Which of the following is the correct syntax to access the value 42 in this nested object?

const data = { info: { age: 42 } };

easy

A. data.info.age

B. data[info][age]

C. data['info'.'age']

D. data.info['age']()

Solution

1. Step 1: Access nested keys with dot notation

   Use dot notation to access nested object properties: data.info.age.

2. Step 2: Check syntax correctness

   data[info][age] is wrong because keys must be strings or variables; data['info'.'age'] is invalid syntax; data.info['age']() tries to call a value as function.

3. Final Answer:

   data.info.age -> Option A

4. Quick Check:

   Dot notation for nested keys = data.info.age [OK]

Hint: Use dot notation for nested keys like data.key1.key2 [OK]

Common Mistakes:

• Using brackets without quotes for keys
• Trying to call a property as a function
• Incorrect string concatenation in keys

3. What will be the output of this code?

const user = { name: 'Alice', contact: { email: '[e-mail]', phone: '1234' } };
console.log(user.contact.email);

medium

A. '[e-mail]'

B. '1234'

C. 'contact'

D. undefined

Solution

1. Step 1: Identify nested property access

   user.contact.email accesses the 'email' property inside the 'contact' object.

2. Step 2: Check the value of user.contact.email

   The value is the string '[e-mail]'.

3. Final Answer:

   '[e-mail]' -> Option A

4. Quick Check:

   Access nested email = '[e-mail]' [OK]

Hint: Follow the chain: object.property.property to get nested value [OK]

Common Mistakes:

• Accessing wrong property like user.email
• Using wrong quotes causing syntax error
• Expecting phone instead of email

4. Find the error in this code snippet:

const book = { title: 'JS Guide', author: { firstName: 'John', lastName: 'Doe' } };
console.log(book.author.firstName());

medium

A. Incorrect object declaration

B. Missing semicolon after object

C. firstName is not a function

D. author property does not exist

Solution

1. Step 1: Check property type

   book.author.firstName is a string, not a function.

2. Step 2: Identify the error in calling it

   Using parentheses () tries to call it as a function, causing a TypeError.

3. Final Answer:

   firstName is not a function -> Option C

4. Quick Check:

   Calling string as function causes error [OK]

Hint: Don't add () after properties unless they are functions [OK]

Common Mistakes:

• Calling string property as function
• Ignoring error message
• Assuming missing semicolon causes error

5. Given this nested object:

const company = {
  name: 'TechCorp',
  departments: {
    sales: { employees: 10 },
    development: { employees: 25 },
    hr: { employees: 5 }
  }
};

// How to get total employees in all departments?

Which code correctly calculates total employees?

hard

A. company.departments.sales + company.departments.development + company.departments.hr

B. company.departments.employees.sales + company.departments.employees.development + company.departments.employees.hr

C. company.departments['employees'].sales + company.departments['employees'].development + company.departments['employees'].hr

D. company.departments.sales.employees + company.departments.development.employees + company.departments.hr.employees

Solution

1. Step 1: Understand object structure

   Each department is an object inside company.departments, with an employees property holding a number.

2. Step 2: Access employees count correctly

   Access employees by chaining: company.departments.sales.employees, etc., then add them.

3. Step 3: Check incorrect options

   Adding the department objects directly (like company.departments.sales) leads to summing objects instead of numbers; accessing employees as a property of departments fails because it doesn't exist on departments--each department has its own.

4. Final Answer:

   company.departments.sales.employees + company.departments.development.employees + company.departments.hr.employees -> Option D

5. Quick Check:

   Sum employees by chaining keys correctly [OK]

Hint: Add numbers by chaining keys: obj.key1.key2 + obj.key3.key4 [OK]

Common Mistakes:

• Adding objects instead of numbers
• Wrong property order
• Using wrong key names