Back to: JavaScript Tutorial For Beginners and Professionals
JavaScript Object Nested Properties with Examples
In this article, I am going to discuss JavaScript Object Nested Properties with Examples. Please read our previous article where we discussed JavaScript Object Properties. At the end of this article, you will understand everything about JavaScript Object Nested Properties.
Nested Properties of an Object in JavaScript
So far, we have seen different ways of accessing the properties i.e.:
- Dot notation: objectName.property; //person.firstName
- Bracket notation: objectName[“property”] //person[“firstName”]
- Computed property: objectName[expression] //z=”age”; person[z]; The expression needs to calculate to a property name. We will learn about computed property in the coming article.
Understanding Nested Properties of JavaScript Object
Now we will see the Nested properties of an object. Let us understand what is Nested properties, how it is created and how we can access it?
Nested properties of an object are properties within properties. An object can contain another object as a property. we can allocate another object as a property of an object. In other words, an object can have a property that is another object.
Values of an object’s properties can be another object. We can access nested properties of an object or nested objects using the dot notation (.) or the bracket notation []. Nested properties of an object can be accessed by chaining key or properties names in the correct sequence order.
Example: JavaScript Objects, access Nested Properties of an object using dot & bracket notation
<html>
<head>
<title> JavaScript Objects, access Nested Properties of an object using dot & bracket notation example</title>
</head>
<body>
<script>
//Nested properties
var person = {
firstName: "Elon",
lastName: "Musk",
age: 25,
address: {
id: 1,
country: "UK"
}
};
console.log("person object: ", person)
console.log("person object length: ", Object.getOwnPropertyNames(person).length)
console.log("person Object literal type? : ", typeof person);// object
//display data
console.log("Person object Nested Properties - with dot notation-->Property id value is: " + person.address.id);
console.log("Person object Nested Properties - with dot notation-->Property country value is: " + person.address.country);
console.log("Person object Nested Properties - with bracket notation-->Property id value is: " + person["address"]["id"]);
console.log("Person object Nested Properties - with bracket notation-->Property country value is: " + person["address"]["country"]);
console.log("Person object Nested Properties - with dot and bracket notation-->Property id value is: " + person.address["id"]);
console.log("Person object Nested Properties - with bracket and dot notation-->Property country value is: " + person["address"].country);
console.log("Person object Nested Properties -->Property id length is: " + person.address.id.length); //1
</script>
</body>
</html>
Now run the above code and open the browser developer tool and have a look at the Console tab and you can see the following output.
In the above sample, we can see that id and country are the properties of the address object which is in turn also a property of the person object.
i.e.:person (object) => address (property) => id (nested property)
=> country (nested property)
We are trying to access the nested properties which are nothing but the properties within the properties. Here id and country are the nested properties inside the address property. So, in order to access the nested properties, we have learned that nested properties of an object can be accessed by chaining key or properties names in the correct sequence order.
The correct sequential order for accessing the nested properties is firstly the object then property later the nested properties i.e.: person then address later id/country (nested properties). Hence the above-written code for accessing the nested properties using dot notation is a person.address.id and person.address.country.the same goes for accessing the nested properties using bracket notation.
Access Nested Properties using Variable in JavaScript
Another way to access the nested properties is by storing them into variables and then they have to access using bracket notation []. If we try to access them using dot notation it returns Uncaught TypeError: Cannot read property ‘country’ of undefined. This means we have to access it using bracket notation only. What we discussed above is given in the below example.
Example: JavaScript Objects, Nested Properties of an object
<html>
<head>
<title>JavaScript Objects, Nested Properties of an object access using variable example</title>
</head>
<body>
<script>
//Nested properties
var person = {
firstName: "Elon",
lastName: "Musk",
age: 25,
address: {
id: 1,
country: "UK"
}
};
let data1 = "address"; //storing it in a variable
let data2 = "country";
console.log("person object: ", person)
console.log("person object length: ", Object.getOwnPropertyNames(person).length)
console.log("person Object literal type? : ", typeof person);// object
//display data
console.log("Person object Nested Properties access using variable with bracket notation-->Property country value is: " + person[data1][data2]);
console.log("Person object Nested Properties access using variable with dot notation-->Property country value is: " + person.data1[data2]);//Uncaught TypeError: Cannot read property 'country' of undefined
</script>
</body>
</html>
Now run the above code and open the browser developer tool by pressing the F12 key and have a look at the Console tab and you can see the following output.
In the above example we have stored the address property of person object in data1 variable let data1 = “address”; also have stored country which is nested property of address property inside data2 variable let data2 = “country”; and at the end, we accessed them using bracket notation i.e.: person[data1][data2] which returns the property value UK. On the other hand, if we try to access the same nested properties stored in a variable using dot notation person.data1[data2] we get Uncaught TypeError: Cannot read property ‘country’ of undefined.
Nested Arrays and Objects in JavaScript
Values of an object’s properties can be arrays and values inside the array can be objects such as
//Nested arrays of an object
var person = {
firstName: "Elon",
lastName: "Musk",
age: 25,
cars: [
{ name: "Ford", "models": ["Fiesta", "Focus", "Mustang"] },
{ name: "BMW", "models": ["320", "X3", "X5"] },
{ name: "Fiat", "models": ["500", "Panda"] }
]
};
We have to use a for-in loop to access each array/element inside the arrays i.e.:
for (let i in person.cars) {
console.log("****" + person.cars[i].name + "****");
for (let j in person.cars[i].models) {
console.log(person.cars[i].models[j]);
}
}
Example: JavaScript Objects, access Nested arrays of an object using dot & bracket notation
<html>
<head>
<title>JavaScript Objects, access Nested arrays of an object using dot & bracket notation example</title>
</head>
<body>
<script>
//Nested arrays of an object
var person = {
firstName: "Elon",
lastName: "Musk",
age: 25,
cars: [
{ name: "Ford", "models": ["Fiesta", "Focus", "Mustang"] },
{ name: "BMW", "models": ["320", "X3", "X5"] },
{ name: "Fiat", "models": ["500", "Panda"] }
]
};
let x = ""
//To access arrays inside arrays, use a for-in loop for each array
for (let i in person.cars) {
console.log("****" + person.cars[i].name + "****");
for (let j in person.cars[i].models) {
console.log(person.cars[i].models[j]);
}
}
//display data
console.log("person object: ", person)
console.log("person object length: ", Object.getOwnPropertyNames(person).length)
console.log("person Object literal type? : ", typeof person);// object
</script>
</body>
</html>
Output:
In the above example we have created an object person with properties firstName, lastName, age and cars with their values respectively. If we noticed that the value of property cars is arrays of car details i.e.:
cars: [
{ name: “Ford”, “models”: [“Fiesta”, “Focus”, “Mustang”] },
{ name: “BMW”, “models”: [“320”, “X3”, “X5”] },
{ name: “Fiat”, “models”: [“500”, “Panda”] }
]
which also contains another array inside it that is the arrays of car models which is nothing but the nested arrays i.e.:
{ name: “Ford”, “models”: [“Fiesta”, “Focus”, “Mustang”]},
{ name: “BMW”, “models”: [“320”, “X3”, “X5”] },
{ name: “Fiat”, “models”: [“500”, “Panda”] }
As we already stated above the values of an object’s properties can be arrays and values inside the array can be objects. And the element of arrays or the array inside the arrays (nested arrays) can be accessed using a for-in loop.
In the next article, I am going to discuss JavaScript Instanceof() Method with Examples. Here, in this article, I try to explain JavaScript Object Nested Properties with Examples and I hope you enjoy this JavaScript Object Nested Properties article.