How to set default value when destructuring an object in JavaScript?-JS Tutorial-php.cn

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

WBOY

Release： 2023-09-01 18:09:06

forward

1116 people have browsed it

在 JavaScript 中解构对象时如何设置默认值？

Arrays and ObjectsDestructuringThe feature was introduced in the ES6 version of JavaScript. Destructuring of arrays and objects allows us to store their values in separate variables. We can then use this variable to access the value of a specific property of the object.

The main issue we need to pay attention to when destructuring array objects is the default value. For example, we added property3 variable in destructuring object, but if the object does not contain property3, destructuring will set undefined value to property3 variable.

Users can follow the example below to understand Destructuring how to set an undefined value to a non-existent property.

Example

In the example below, we create a demo_obj object that contains x and y properties with some integer values. After that, we deconstruct demo_obj and try to set its attribute values in w, x, y, and z variables.

In the output, we can observe that the value of w and z variables is undefined since it does not 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>

Copy after login

From the above example, users understand why we need to set default values for variables when destructuring objects.

grammar

Users can set default values according to the following syntax when destructuring objects in JavaScript.

const { prop1, prop2 = default_value, prop3 = default_value } = {
   prop1 : value1,
   prop2 : value2
};

Copy after login

In the above syntax, we destructure the objects in the prop1, prop2 and porp3 variables. Additionally, we set default values for the prop2 and prop3 variables.

Example

In the example below, we create an employee object containing ID, name, and salary. After that, we destructure the employee object in the id, name, salary and age variables. Additionally, we initialize the age variable with a default value of 22.

In the output, we can observe that the age variable has a value of 22, which is the default value because the employee object does not contain the age attribute.

<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>

Copy after login

Example

In the following example, we create a table object and destructure it into id, drawer, width, and color variables. The user can observe that since the table object does not contain a width property, the value of the width variable is 4 feet, which is the default value.

For other variables, it gets the value from the object property. For example, the default value of a color variable is black. Nonetheless, since the object contains a color property with a green value, green is assigned as the 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>

Copy after login

Users learned in this tutorial how to destructure objects with default values. Additionally, users can initialize variables with some default values when they are created, rather than assigning them some default values when destructuring the object.

From the above example, we can understand that when an object contains any attribute, the attribute value will be set to a variable; otherwise, the variable will maintain the default value.

The above is the detailed content of How to set default value when destructuring an object in JavaScript?. For more information, please follow other related articles on the PHP Chinese website!