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

Table of Contents

Example

grammar

Home

Web Front-end

JS Tutorial

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Sep 01, 2023 pm 06:09 PM

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

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Assassin's Creed Shadows: Seashell Riddle Solution

3 weeks ago By DDD

What's New in Windows 11 KB5054979 & How to Fix Update Issues

2 weeks ago By DDD

Assassin's Creed Shadows - How To Find The Blacksmith And Unlock Weapon And Armour Customisation

1 months ago By DDD

Where to find the Crane Control Keycard in Atomfall

3 weeks ago By DDD

Roblox: Dead Rails - How To Complete Every Challenge

3 weeks ago By DDD

Hot Tools

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Where is the login entrance for gmail email?

7643

CakePHP Tutorial

1392

What is the format of the account name of steam

win11 activation key permanent

nyt connections hints and answers

150

Related knowledge

What should I do if I encounter garbled code printing for front-end thermal paper receipts? Apr 04, 2025 pm 02:42 PM

Frequently Asked Questions and Solutions for Front-end Thermal Paper Ticket Printing In Front-end Development, Ticket Printing is a common requirement. However, many developers are implementing...

Who gets paid more Python or JavaScript? Apr 04, 2025 am 12:09 AM

There is no absolute salary for Python and JavaScript developers, depending on skills and industry needs. 1. Python may be paid more in data science and machine learning. 2. JavaScript has great demand in front-end and full-stack development, and its salary is also considerable. 3. Influencing factors include experience, geographical location, company size and specific skills.

Demystifying JavaScript: What It Does and Why It Matters Apr 09, 2025 am 12:07 AM

JavaScript is the cornerstone of modern web development, and its main functions include event-driven programming, dynamic content generation and asynchronous programming. 1) Event-driven programming allows web pages to change dynamically according to user operations. 2) Dynamic content generation allows page content to be adjusted according to conditions. 3) Asynchronous programming ensures that the user interface is not blocked. JavaScript is widely used in web interaction, single-page application and server-side development, greatly improving the flexibility of user experience and cross-platform development.

How to merge array elements with the same ID into one object using JavaScript? Apr 04, 2025 pm 05:09 PM

How to merge array elements with the same ID into one object in JavaScript? When processing data, we often encounter the need to have the same ID...

How to achieve parallax scrolling and element animation effects, like Shiseido's official website? or: How can we achieve the animation effect accompanied by page scrolling like Shiseido's official website? Apr 04, 2025 pm 05:36 PM

Discussion on the realization of parallax scrolling and element animation effects in this article will explore how to achieve similar to Shiseido official website (https://www.shiseido.co.jp/sb/wonderland/)...

The difference in console.log output result: Why are the two calls different? Apr 04, 2025 pm 05:12 PM

In-depth discussion of the root causes of the difference in console.log output. This article will analyze the differences in the output results of console.log function in a piece of code and explain the reasons behind it. �...

Is JavaScript hard to learn? Apr 03, 2025 am 12:20 AM

Learning JavaScript is not difficult, but it is challenging. 1) Understand basic concepts such as variables, data types, functions, etc. 2) Master asynchronous programming and implement it through event loops. 3) Use DOM operations and Promise to handle asynchronous requests. 4) Avoid common mistakes and use debugging techniques. 5) Optimize performance and follow best practices.

How to implement panel drag and drop adjustment function similar to VSCode in front-end development? Apr 04, 2025 pm 02:06 PM

Explore the implementation of panel drag and drop adjustment function similar to VSCode in the front-end. In front-end development, how to implement VSCode similar to VSCode...

See all articles