Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What's the difference between object destructuring and normal object assignment in Javascript ES6?

What's the difference between this two code examples (besides the syntax of course)?

EXAMPLE 1:

var user = {
   name: 'Diego',
   age: 25
}

var {name} = user;

console.log(name); // Diego

EXAMPLE 2:

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.

like image 492
Diogo Capela Avatar asked Feb 18 '17 14:02

Diogo Capela


People also ask

What is Destructuring assignment in ES6?

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.

What is object Destructuring in JS?

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.

What is a Destructuring assignment?

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.

What is difference between Destructuring and rest operator?

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.


2 Answers

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.

like image 182
melpomene Avatar answered Oct 22 '22 06:10

melpomene


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.

like image 24
Pointy Avatar answered Oct 22 '22 07:10

Pointy