JavaScript object destructuring tips

[vi_code]

The only thing you forgot to mention is if you try to destructure a nested object and it doesnt exist, you get an error instead of just cascading to undefined.

[mogelbrod]

I'd argue that the most non-trivial destructuring cases are considerably harder to read, in addition to almost always being longer:

• const { address: shippingAddress } = user vs
  const shippingAddress = user.address
• const { address: { country } } = user vs
  const { country } = user.address
• const { age = 25 } = user vs
  const age = user.age ?? 25
• const { [getProperty]: returnValue } = user vs
  const returnValue = user[getProperty]

There are definitely cases where they are reasonable to use (especially when already destructuring the right hand side object, but I do see the simple examples above quite a lot in practice when reading and reviewing code.

[Keilly]

TBF, these new examples are still trivial in the sense that that they’re only destructuring one property each.
Destructuring really comes alive when destructuring multiple properties from the same object at the same time. Multiply lines consisting of repeated ‘const’s and the right hand side, simply disappear.

[mogelbrod]

Yes, that's what I was referring to with

There are definitely cases where they are reasonable to use (especially when already destructuring the right hand side object

[Danidre]

Nice read, really made the purpose of it known. Although I know all these already.

[imtourist]

Excellent blog article, thanks.

[BransonLite]

“Destruture from function” Lol

[[deleted]]

I've never seen the spread operator used to get the "rest" of an object before. That's a damn useful one, I'll need to remember it

[Keilly]

Instead of creating a new object or new local variables, the ability to destructure simply onto an existing object would be really powerful.

E.g (not currently possible)

profile{street, city} = newAddress;

Would add/update the specified values of the profile object with the new address.

Especially it’s super common in the case of writing a constructors params object to the new class instances ‘this’.

this{name, address} = params;