Nested objects in Javascript - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to access the city name inside the nested object.

Javascript

const person = { name: 'Alice', address: { city: [1], zip: '12345' } };
console.log(person.address.city);

Drag options to blanks, or click blank then click option'

A'New York'

BNew York

C'city'

Dcity

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting to put quotes around string values.

Using the key name instead of the value.

The city name is a string value, so it must be enclosed in quotes.

2fill in blank

medium

Complete the code to add a nested object for the phone number inside the contact object.

Javascript

const contact = { email: '[e-mail]', phone: [1] };
console.log(contact.phone.mobile);

Drag options to blanks, or click blank then click option'

A'123-456-7890'

B[ '123-456-7890' ]

C{ mobile: '123-456-7890' }

D1234567890

Attempts:

3 left

💡 Hint

Common Mistakes

Using a string directly instead of an object.

Using an array instead of an object.

The phone property should be an object with a mobile property as a string.

3fill in blank

hard

Fix the error in accessing the nested property to get the postal code.

Javascript

const data = { location: { address: { postalCode: '90210' } } };
console.log(data.location.[1].postalCode);

Drag options to blanks, or click blank then click option'

ApostalCode

Bpostcode

Cpostal_code

Daddress

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect key names like 'postcode' or 'postal_code'.

Mixing camelCase and snake_case.

The correct key to access the postal code is 'address', not 'postcode' or others.

4fill in blank

hard

Fill both blanks to create a nested object with a name and an age property inside the user object.

Javascript

const user = { profile: { [1]: 'Bob', [2]: 30 } };
console.log(user.profile.name, user.profile.age);

Drag options to blanks, or click blank then click option'

Aname

Bage

Cusername

Dyears

Attempts:

3 left

💡 Hint

Common Mistakes

Using keys that don't match the console.log statement.

Using incorrect property names like 'username' or 'years'.

The nested object keys should be 'name' and 'age' to match the console.log access.

5fill in blank

hard

Fill all three blanks to create a nested object representing a book with title, author, and year properties.

Javascript

const book = { info: { [1]: '1984', [2]: 'George Orwell', [3]: 1949 } };
console.log(book.info.title, book.info.author, book.info.year);

Drag options to blanks, or click blank then click option'

Aname

Bauthor

Cyear

Dtitle

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong keys like 'name' instead of 'title'.

Mixing up the order of keys.

The keys must be 'title', 'author', and 'year' to match the console.log output.

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