Nested objects in Javascript - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a nested object in JavaScript?

A nested object is an object that is a value inside another object. It means one object contains another object as a property.

beginner

How do you access a property inside a nested object?

You use dot notation or bracket notation for each level. For example, obj.innerObj.property accesses property inside innerObj which is inside obj.

beginner

Given <code>const person = { name: 'Anna', address: { city: 'Paris', zip: 75000 } };</code>, how do you get the city?

You get the city by writing person.address.city. This goes inside the address object to get the city property.

intermediate

Can nested objects contain arrays or other nested objects?

Yes! Nested objects can have arrays or even more objects inside them. This lets you build complex data structures.

intermediate

How do you safely access a deeply nested property without errors if some parts might be missing?

You can use optional chaining like obj?.innerObj?.property. This stops and returns undefined if any part is missing, avoiding errors.

What does the following code access?
user.profile.email

A The user property inside the profile object of email

B The profile property inside the email object of user

C The email property inside the profile object of user

D The profile property inside the user object called email

Dot notation reads from left to right: user → profile → email property.

Which is the correct way to access the zip code in this object?
const data = { location: { zip: 12345 } };

A data.zip

B data.location.zip

C data['zip']

D data.location['city']

The zip code is inside the location object, so use data.location.zip.

What will obj?.inner?.value return if obj.inner is undefined?

A Returns false

B Throws an error

C Returns null

D Returns undefined

Optional chaining returns undefined if any part before it is missing, avoiding errors.

Can a nested object property be an array?

A Yes, objects can contain arrays as properties

B No, objects can only contain other objects

C Only if the array has objects inside

D Only if the array is empty

Objects can have any type as property values, including arrays.

How do you add a new nested object property to an existing object?

A Use dot notation to assign a new object, e.g., obj.newProp = {}

B You cannot add nested properties after creation

C Use array methods

D Use JSON.stringify

You can add nested properties anytime by assigning an object to a property.

Explain what a nested object is and how you access its properties in JavaScript.

Think about objects inside objects and how to reach inside.

Describe how optional chaining helps when working with nested objects.

It uses question marks to safely check each level.

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