How to set default values when destructuring an object in JavaScript?

Javascript Web Development Front End Technology

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

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>

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 porp3 variables. Also, we have set up the default values for the prop2 and prop3 variables.

Example

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>

Example

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 green value, green 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>

Users learned to destructure the objects with default values in this tutorial. Also, users can initialize the variable with some default value while creating the variables rather than assigning them some default values while destructuring the object.

From the above examples, we can learn that when an object contains any property, it sets the property value to the variable; otherwise, the variable keeps containing the default value.