DEV Community

Discussion on: 5 neat JavaScript tips

Collapse
 
kazppa profile image
Kazppa

May i ask some explanation about the "benefits" of destructuring ?

Collapse
 
daliboru profile image
Dalibor Belic

Sure.
I remember once a senior dev told me (I was a junior) that it's not just enough to do something. You have to do it the right way. Destructuring makes our code cleaner and more readable.

Collapse
 
akashkava profile image
Akash Kava

Destructuring improves speed by accessing members by one time assignment. Every a.b member expression is slower as it travels prototype chain for access.

The argument becomes immutable, reassigning destructred variable will not modify the source.

Collapse
 
avatarkaleb profile image
Kaleb M

I don't think this would be true if the destructured key was an object, it would still be by reference.

Overall I agree that destructuring is cleaner though!

Thread Thread
 
akashkava profile image
Akash Kava
const user = { name: "Akash" };
let { name } = user;
name = undefined;
console.log(user.name);
Enter fullscreen mode Exit fullscreen mode

Should it print undefined or "Akash"?

In no way destructured variable is by reference. Reassigning destructured variable is immutable (not changing property of object held in destructured variable if it is an object).

Thread Thread
 
avatarkaleb profile image
Kaleb M

Yes, you assigned the string, so no not by reference. If name itself was an object, it would be by reference yea?

Thread Thread
 
akashkava profile image
Akash Kava

Try it and show me a working example.

Thread Thread
 
qm3ster profile image
Mihail Malo
const user = { name: { first: "Akash", second: "Kava" } }
const { name } = user
name.first = "🅱️epis"
console.table(user.name)
Enter fullscreen mode Exit fullscreen mode

Sir, please, there is no need to be rude.
(and yes, you will say to do const { name: { first } } = user, but pls. Pls. Sir, pls.)

Thread Thread
 
akashkava profile image
Akash Kava

In which way the word "Reassigning destructured variable" is similar to name.first = ... ? The whole purpose of destructuring is not to use member expression name.first. And yes let { name: { first } } = user is the correct way to use desctructering. user is immutable here. It is important to note that we can pass an object to a function which will not change the original object if function is written correctly using destructering. JavaScript compiler can also optimize it by knowing that the function is pure.

Thread Thread
 
vkbr profile image
Vivek B

Destructuring in itself doesn't make it immutable. In the example @akashkava where you re-assigned value to "name" variable and it didn't affect the original object is because the variable of type String (or any other primitives) are immutable and not because it is coming from a destructured object.
Your example is same as

let name = user.name; // string
Enter fullscreen mode Exit fullscreen mode

which makes it immutable because of the data type. @qm3ster 's example showed that destructured values could be mutated which will mutate the origin object.

Destructuring is just syntactic sugar to provide more readability.
const name = user.name is same as const { name } = user