Learn Working with Nested and Dynamic Objects


              12345678910111213141516171819202122232425
            
const user = {
  name: "Alice",
  contact: {
    email: "alice@example.com",
    address: {
      city: "Wonderland",
      zip: "12345"
    }
  }
};

// Accessing a nested property using dot notation
console.log(user.contact.email); // "alice@example.com"

// Modifying a nested property using dot notation
user.contact.address.city = "Looking Glass";
console.log(user.contact.address.city); // "Looking Glass"

// Accessing a nested property using bracket notation
console.log(user["contact"]["address"]["zip"]); // "12345"

// Adding a new nested property dynamically
const key = "phone";
user.contact[key] = "555-1234";
console.log(user.contact.phone); // "555-1234"

When working with objects in JavaScript, you often encounter properties that are themselves objects, resulting in nested objects. To access or modify these nested properties, you can use either dot notation or bracket notation. Dot notation is straightforward and concise, as in user.contact.email, and is the preferred choice when you know the exact property names ahead of time and those names are valid identifiers (no spaces or special characters).

Bracket notation, such as user["contact"]["address"]["zip"], allows you to use variables as property keys or access properties with names that include spaces, special characters, or are dynamically determined at runtime. This is especially useful when you need to add or access properties whose names are not fixed, as shown when adding a new phone property using a variable key.

In summary:

Use dot notation for direct, known property names that are valid identifiers;
Use bracket notation when property names are dynamic, stored in variables, or contain characters not allowed in identifiers.

Everything was clear?

Thanks for your feedback!

Section 4. Chapter 2

Ask AI

Ask anything or try one of the suggested questions to begin our chat

Suggested prompts:

Can you explain more about when to use bracket notation over dot notation?

What happens if I try to access a property that doesn't exist in a nested object?

Can you show how to safely access deeply nested properties?

Awesome!

Completion rate improved to 6.25

Swipe to show menu


              12345678910111213141516171819202122232425
            
const user = {
  name: "Alice",
  contact: {
    email: "alice@example.com",
    address: {
      city: "Wonderland",
      zip: "12345"
    }
  }
};

// Accessing a nested property using dot notation
console.log(user.contact.email); // "alice@example.com"

// Modifying a nested property using dot notation
user.contact.address.city = "Looking Glass";
console.log(user.contact.address.city); // "Looking Glass"

// Accessing a nested property using bracket notation
console.log(user["contact"]["address"]["zip"]); // "12345"

// Adding a new nested property dynamically
const key = "phone";
user.contact[key] = "555-1234";
console.log(user.contact.phone); // "555-1234"

In summary:

Use dot notation for direct, known property names that are valid identifiers;
Use bracket notation when property names are dynamic, stored in variables, or contain characters not allowed in identifiers.

Everything was clear?

Thanks for your feedback!

Section 4. Chapter 2