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 set default values when destructuring an object in JavaScript?
The array and object destructuring feature was introduced in the ES6 version of JavaScript. The destructuring of the array and object allows us to store its values in a separate variable. After that, we can use that variable to access the value of the particular property of the object.
The main thing we need to focus on while destructuring the array object is the default values. For example, we have added the property3 variable in the destructuring object, but if the object doesn't contain the property3, destructuring sets the undefined value to the property3 variable.
Users can follow the example below to see how destructuring sets the undefined value to the non-existing property.
Example Without Default Values
In the example below, we have created the demo_obj object, which contains the x and y properties with some integer values. After that, we destructure the demo_obj and try to set its property values in the w, x, y, and z variables.
In the output, we can observe that the value of the w and z variable is undefined, as it doesn't exist in the demo_obj object.
<html>
<body>
<h2>Destructuring objects without default values in JavaScript</h2>
<div id="output"></div>
</body>
<script>
let output = document.getElementById('output');
let demo_obj = {
x: 30,
y: 60
}
const { w, x, y, z } = demo_obj;
output.innerHTML += "The value of w variable is " + w + "<br/>";
output.innerHTML += "The value of x variable is " + x + "<br/>";
output.innerHTML += "The value of y variable is " + y + "<br/>";
output.innerHTML += "The value of z variable is " + z + "<br/>";
</script>
</html>
The value of w variable is undefined The value of x variable is 30 The value of y variable is 60 The value of z variable is undefined
From the above example, users understood why we need to set the default values to the variables while destructuring the objects.
Syntax
Users can follow the syntax below to set the default value when destructuring objects in JavaScript.
const { prop1, prop2 = default_value, prop3 = default_value } = {
prop1: value1,
prop2: value2
};
In the above syntax, we destructure the object in the prop1, prop2, and prop3 variables. Also, we have set up the default values for the prop2 and prop3 variables.
Example With Default Values
In the example below, we have created the employee object containing the id, name, and salary. After that, we destructure the employee object in the id, name, salary, and age variables. Also, we have initialized the age variable with a 22 default value.
In the output, we can observe that the value of the age variable is 22, which is a default value as the employee object doesn't contain the age property.
<html>
<body>
<h2>Destructuring objects <i>with default values</i> in JavaScript</h2>
<div id="output"></div>
</body>
<script>
let output = document.getElementById('output');
let employee = {
id: "12345",
name: "Shubham",
salary: "10000$",
}
const { id, name, salary, age = 22 } = employee;
output.innerHTML += "The value of id variable is " + id + "<br/>";
output.innerHTML += "The value of name variable is " + name + "<br/>";
output.innerHTML += "The value of salary variable is " + salary + "<br/>";
output.innerHTML += "The value of age variable is " + age + "<br/>";
</script>
</html>
The value of id variable is 12345 The value of name variable is Shubham The value of salary variable is 10000$ The value of age variable is 22
Example: Default Values Override
In the example below, we have created the table object and destructure it into the id, drawer, width, and colour variables. Users can observe that as the table object doesn't contain the width property, the value of the width variable is 4 feet, which is the default value.
For other variables, it gets value from the object property. For example, the default value of the color variable is black. Still, as the object contains a color property with a blue value, blue is assigned as a value of the color variable.
<html>
<body>
<h2>Destructuring objects <i>with default values</i> in JavaScript</h2>
<div id="output"></div>
</body>
<script>
let output = document.getElementById('output');
let table = {
id: "table2",
color: "blue",
drawers: 3,
}
const { id, color = "black", drawers = 5, width = "4 feet" } = table;
output.innerHTML += "The value of id variable is " + id + "<br/>";
output.innerHTML += "The value of color variable is " + color + "<br/>";
output.innerHTML += "The value of drawers variable is " + drawers + "<br/>";
output.innerHTML += "The value of width variable is " + width + "<br/>";
</script>
</html>
The value of id variable is table2 The value of color variable is blue The value of drawers variable is 3 The value of width variable is 4 feet
Key Points
- Default values are only used when the property is
undefinedor doesn't exist in the object - If the property exists with a value (even
nullor0), the default value is ignored - Default values can be any JavaScript expression, including function calls
Conclusion
Object destructuring with default values prevents undefined variables when properties are missing. The default value is only used when the property doesn't exist in the object, making your code more robust and predictable.
6K+ Views
