Accessing and Updating Object Properties

In JavaScript, objects are used to store data in a structured way using properties. Once you create an object, you’ll often need to read or change its properties. JavaScript gives you simple tools to do this using dot and bracket notation. You can also add new properties or remove existing ones, making objects flexible and easy to work with.

Accessing Object Properties

Once you create an object, you’ll need to access its properties (values). There are two main ways to do this:

1. Dot Notation

This is the most common and simple way to access properties or methods of an object. Use the object name followed by a dot (.) and then the name of the property or method you want to access.

Syntax

javascript
1
          objectName.key

Example

javascript
1
2
3
4
5
6
          const car = {
  color: "red",
  model: "Toyota",
  speed: 120
};
console.log(car.color); // Output: red

car.color means: Get the value of the color property from the car object.

Use dot notation when the property name is a normal word (no spaces or special characters).

2. Bracket Notation

This way uses square brackets ([]) and the property name as a string.

Syntax

javascript
1
          objectName["key"]

Example

javascript
1
2
3
4
5
6
          const car = {
  color: "red",
  model: "Toyota",
  speed: 120
};
console.log(car["color"]); // Output: red

Use bracket notation when the property name:

  • Has spaces (user["first name"]).
  • Starts with a number (obj["1stPlace"]).
  • Comes from a variable.

Examples:

javascript
1
2
3
4
5
6
7
8
9
10
11
          const car = {
  color: "red",
  model: "Toyota",
  speed: 120
};

// Define the property name in a variable
const prop = "speed";

// Access the value of the 'speed' property using bracket notation and a variable
console.log(car[prop]); // Output: 120
javascript
1
2
3
4
5
6
          const user = {
  "full name": "Alice Smith"
};
console.log(user["full name"]); // Output: Alice Smith

Bracket notation is more flexible, but dot notation is cleaner when you can use it.

Bracket notation is more flexible, but dot notation is cleaner when you can use it.

Adding Object Properties

You can easily add a new property to an object using dot notation or bracket notation.

1. dot notation

Syntax

javascript
1
          objectName.propertyName = value;

Example

javascript
1
2
3
4
5
6
7
8
9
          let person = {  
  name: "Alex",  
  age: 30  
};  

// Adding a new property using dot notation) 
person.job = "Developer";  

console.log(person);
  • person is the object.
  • job is the property we’re adding.
  • Developer is the value we're setting.

2. bracket notation

Syntax

javascript
1
          objectName["propertyName"] = value;

Example

javascript
1
2
3
4
5
6
7
8
9
          let person = {  
  name: "Alex",  
  age: 30  
};  

// Adding a new property using bracket notation
person["country"] = "USA";  

console.log(person);
  • This works just like dot notation.
  • The only difference is the property name is written as a string inside [""].

Updating Object Properties

When you want to change a value stored in a JavaScript object, you can update the property directly using either dot notation or bracket notation. Both methods allow you to target a specific key and assign it a new value.

Here’s an example using dot notation

javascript
1
2
3
4
5
6
7
          const user = {
  name: "Alice",
  age: 25
};

user.age = 26; // Update the age
console.log(user.age); // Output 26

You can also use bracket notation, which is useful when the key is stored in a variable or contains special characters:

javascript
1
2
3
4
5
6
7
          const user = {
  name: "Alice",
  age: 25
};

user["age"] = 26; // Update the name
console.log(user.age); // Output; 26

Deleting Properties from Objects

Sometimes, we may need to remove a property from an object—whether to clean up data or restructure it.

To delete a property from an object, use the delete keyword followed by the object name and the property you want to remove.

Example:

javascript
1
2
3
4
5
6
7
8
9
          const user = {
  name: "Alice",
  age: 25,
  isAdmin: true
};

delete user.age;

console.log(user); // Output: { name: "Alice", isAdmin: true }

In this example, the age property is removed from the user object. After using delete, the object no longer includes that property.

Nested Objects

Objects can be nested, meaning an object can contain another object. This is useful for representing more complex structures, like a user profile with an address

Example

javascript
1
2
3
4
5
6
7
8
9
          let user = {
  name: "Sam",
  age: 30,
  address: {
    street: "123 Main St",
    city: "New York",
    country: "USA"
  }
};

In this case, address is a nested object inside user. It has its own properties like street, city, and country.

Accessing Nested Values

To access a value inside a nested object, you use dot notation multiple times:

Example

javascript
1
2
3
4
5
6
7
8
9
10
          let user = {
  name: "Sam",
  age: 30,
  address: {
    street: "123 Main St",
    city: "New York",
    country: "USA"
  }
};
console.log(user.address.city); // Output: New York

You can also use square brackets if the property name is dynamic or not a valid identifier:

Example

javascript
1
2
3
4
5
6
7
8
9
10
11
          let user = {
  name: "Sam",
  age: 30,
  address: {
    street: "123 Main St",
    city: "New York",
    country: "USA"
  }
};

console.log(user["address"]["street"]); // Output: 123 Main St

This is especially useful when you're working with variable keys:

Example

javascript
1
2
3
4
5
6
7
8
9
10
11
          let user = {
  name: "Sam",
  age: 30,
  address: {
    street: "123 Main St",
    city: "New York",
    country: "USA"
  }
};
const key = "city";
console.log(user.address[key]); // Output: New York

Sometimes, objects can be deeply nested. Here's a more complex example:

javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
          const company = {
  name: "Tech Corp",
  departments: {
    engineering: {
      lead: "Alice",
      teamSize: 10
    },
    marketing: {
      lead: "Bob",
      teamSize: 5
    }
  }
};

To access the engineering lead's name, you write: console.log(company.departments.engineering.lead);

javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
          const company = {
  name: "Tech Corp",
  departments: {
    engineering: {
      lead: "Alice",
      teamSize: 10
    },
    marketing: {
      lead: "Bob",
      teamSize: 5
    }
  }
};

console.log(company.departments.engineering.lead); // Output: Alice

As nesting grows, it’s important to make sure all levels exist before accessing a property. Otherwise, you might get an error. One way to safely do this is by using optional chaining (?.):

javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
          const company = {
  name: "Tech Corp",
  departments: {
    engineering: {
      lead: "Alice",
      teamSize: 10
    },
    marketing: {
      lead: "Bob",
      teamSize: 5
    }
  }
};

console.log(company.departments?.sales?.lead); // Output: undefined

This avoids errors when the property doesn’t exist.