What's the difference between this two code examples (besides the syntax of course)?
var user = {
name: 'Diego',
age: 25
}
var {name} = user;
console.log(name); // Diego
var user = {
name: 'Diego',
age: 25
}
var name = user.name;
console.log(name); // Diego
Both examples assign the same value. I don't get what's the difference or vantage/advantage of using either.
The destructuring assignment is a cool feature that came along with ES6. Destructuring is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables. That is, we can extract data from arrays and objects and assign them to variables.
Destructuring is a JavaScript expression that allows us to extract data from arrays, objects, and maps and set them into new, distinct variables. Destructuring allows us to extract multiple properties, or items, from an array at a time.
Destructuring Assignment is a JavaScript expression that allows to unpack values from arrays, or properties from objects, into distinct variables data can be extracted from arrays, objects, nested objects and assigning to variables.
Destructuring is used to create varibles from array items or object properties. Spread syntax is used to unpack iterables such as arrays, objects, and function calls. Rest parameter syntax will create an array from an indefinite number of values.
Let's extend this to multiple properties:
var {foo, bar, baz} = user;
In the traditional syntax, this would be:
var foo = user.foo,
bar = user.bar,
baz = user.baz;
So for every property, we have to repeat the object we want to access (user
) and the name of the property foo = ... .foo
. The new syntax makes it easier to repeat yourself less.
There's another difference if the object isn't already stored in a variable:
var {foo, bar, baz} = getUser();
Now we can't just do
var foo = getUser().foo,
bar = getUser().bar,
baz = getUser().baz;
because each call to getUser
might do different things (due to side effects) or just be inefficient (because we're repeating work). We'd have to create a new local variable to store the object in, just to initialize the three variables we actually care about.
There's no effective difference, but destructuring is convenient:
var user = {
name: 'Diego',
age: 25
}
var {name, age} = user;
That declares and initializes both name
and age
in one statement without redundant mentions of the property names.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With