Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to modify properties of a nested object in JavaScript?
There are two methods to modify properties of nested objects in JavaScript. One is Dot notation and the other is Bracket notation. The functionality is the same for both methods, but they differ in their syntax and use cases.
Let's discuss them in detail with practical examples.
Dot Notation Method
Dot notation is the most common way to access and modify nested object properties. Use this when property names are valid identifiers and known at compile time.
Example
In the following example, initially the value of property country is England. Using dot notation, the value is changed to India.
<html>
<body>
<script>
var person = {
"name": "Ram",
"age": 27,
"address": {
"houseno": 123,
"streetname": "Baker street",
"country": "England"
}
};
document.write("Before change: " + person.address.country);
person.address.country = "India";
document.write("<br>");
document.write("After change: " + person.address.country);
</script>
</body>
</html>
Output
Before change: England After change: India
Bracket Notation Method
Bracket notation is useful when property names contain special characters, spaces, or are stored in variables. It's more flexible than dot notation.
Example
In the following example, the value of property 'country' is changed from England to India using bracket notation.
<html>
<body>
<script>
var person = {
"name": "Ram",
"age": 27,
"address": {
"houseno": 123,
"streetname": "Baker street",
"country": "England"
}
};
document.write("Before change: " + person.address["country"]);
person.address["country"] = "India";
document.write("<br>");
document.write("After change: " + person.address["country"]);
</script>
</body>
</html>
Output
Before change: England After change: India
Dynamic Property Access
Bracket notation becomes essential when working with dynamic property names:
<html>
<body>
<script>
var person = {
"address": {
"country": "England",
"city": "London"
}
};
var propertyName = "country";
document.write("Original: " + person.address[propertyName]);
// Modify using variable
person.address[propertyName] = "Australia";
document.write("<br>Modified: " + person.address[propertyName]);
</script>
</body>
</html>
Output
Original: England Modified: Australia
Comparison
| Method | Syntax | Best For | Limitations |
|---|---|---|---|
| Dot Notation | obj.prop.nested |
Static property names | Cannot use spaces or special characters |
| Bracket Notation | obj["prop"]["nested"] |
Dynamic or special property names | Slightly more verbose |
Conclusion
Both dot and bracket notation effectively modify nested object properties. Use dot notation for simple, static properties and bracket notation for dynamic access or properties with special characters.
3K+ Views
