Accessing Nested Objects in JavaScript

Nested objects are a powerful and useful feature of JavaScript, allowing you to store complex data within a single object. You can think of nested objects as a series of objects that are linked together. In this tutorial, we will go over how to access various elements of these nested objects.

Defining a Nested Object

Before we can access nested objects, we must first understand how to create them. To create a nested object, you use the same syntax as you would for a normal object, but add additional objects as the value of a key.

[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” line-numbers=”no” bg-color=”#abb8c3″ theme=”dark” language=”php” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]

let person = {
  name: "John",
  age: 30,
  address: {
    street: "123 Main Street",
    city: "New York",
    state: "NY"
  }
};

[/dm_code_snippet]

In the example above, we have a “person” object with three properties: a “name”, “age”, and “address”. The value of the “address” property is an object with its own set of key-value pairs.

Accessing Nested Object Properties

Now that we have defined a nested object, let’s go over how to access the properties of that object. To access the properties of a nested object, we use the dot notation or the bracket notation.

The dot notation is the most common way of accessing properties of a nested object. To use the dot notation, we simply type the name of the object, followed by a dot, followed by the property we want to access. For example, to access the “street” property of the “address” object, we would use the following syntax:

person.address.street; // returns "123 Main Street"

[/dm_code_snippet]

The bracket notation is a bit more flexible than the dot notation, as it allows us to access properties with dynamic names. To use the bracket notation, we type the name of the object, followed by square brackets containing the property we want to access. For example, to access the “state” property of the “address” object, we would use the following syntax:

person["address"]["state"]; // returns "NY"

[/dm_code_snippet]

Adding Properties to a Nested Object

We can also add new properties to a nested object. To do so, we simply use either the dot notation or the bracket notation to specify the property we want to add. For example, to add a “zipcode” property to the “address” object, we would use the following syntax:

person.address.zipcode = "10001";
person["address"]["zipcode"] = "10001";

[/dm_code_snippet]

Both of these syntaxes are equivalent and will have the same result. The only difference is that the bracket notation allows us to specify a dynamic property name, while the dot notation does not.

Updating Properties of a Nested Object

Updating the properties of a nested object is a bit different than adding a property. To update a property, we use the same syntax as we would use to access it, but we also include a value. For example, to update the “city” property of the “address” object, we would use the following syntax:

person.address.city = "Brooklyn";
person["address"]["city"] = "Brooklyn";

[/dm_code_snippet]

Deleting Properties of a Nested Object

Finally, we can delete properties of a nested object. To do so, we use the JavaScript “delete” keyword followed by the property we want to delete. For example, to delete the “street” property of the “address” object, we would use the following syntax:

delete person.address.street;
delete person["address"]["street"];

[/dm_code_snippet]

Both of these syntaxes are equivalent and will have the same result. The only difference is that the bracket notation allows us to specify a dynamic property name, while the dot notation does not.

Conclusion

In this tutorial, we went over how to access, add, update, and delete properties of nested objects in JavaScript. We saw that we can use either the dot notation or the bracket notation to access properties, but that the bracket notation is more flexible when it comes to dynamic property names. We also saw how to add, update, and delete properties of nested objects. With this knowledge, you should have no trouble working with nested objects in JavaScript.

Accessing Nested Objects in JavaScript