Search for a command to run...
Object destructuring and assigning it to an existing object's key:value pairs
No comments yet. Be the first to comment.
index.html : <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Workers</title> <script src="main.js"></script> </head> <body> 1 USD = <span...
Fetch the latest currency conversion rate using async ... await
Taking advantage of latest JavaScript features: ECMAScript 2024
Replacing deprecated event.target.selectedIndex with this.selectedIndex
Using destructuring to update an object's attribute
JavaScript
12 posts
Today I learnt something totally brand new in JavaScript from ChatGPT !
let foo = () =>
{
return { monthly: 3, onetime: 6 };
}
let obj = { x:0, monthly: 0, onetime: 0, y:0 };
How do I do the following?
{ obj.monthly, obj.onetime } = foo();
To assign the values returned by the foo() function to the obj.monthly and obj.onetime properties, you can use object destructuring. Here's the updated code:
let foo = () => {
return { monthly: 3, onetime: 6 };
};
let obj = { x: 0, monthly: 0, onetime: 0, y: 0 };
({ monthly: obj.monthly, onetime: obj.onetime } = foo());
In this code, object destructuring is used to extract the monthly and onetime properties from the object returned by the foo() function. The destructured properties are then assigned to the corresponding properties of the obj object using the syntax property: target.
After executing this code, obj.monthly will have the value 3 and obj.onetime will have the value 6, matching the values returned by the foo() function.
My Q : Why is there a parenthesis surrounding { monthly: obj.monthly, onetime: obj.onetime } = foo() ?
The parentheses surrounding { monthly: obj.monthly, onetime: obj.onetime } in ({ monthly: obj.monthly, onetime: obj.onetime } = foo()) are necessary for syntactic reasons.
In JavaScript, when you have a statement that starts with a curly brace {, it is interpreted as a block statement rather than an object literal. Wrapping the entire assignment statement in parentheses helps clarify that you are performing an object destructuring assignment.
Without the parentheses, the JavaScript interpreter would treat { monthly: obj.monthly, onetime: obj.onetime } as a block statement rather than an object literal, resulting in a syntax error.
Therefore, the parentheses are used to explicitly indicate that the intention is to destructure the returned object from foo() and assign its properties to obj.monthly and obj.onetime.