Monday, April 8, 2019

ecmascript 6 is fire. i mean, it should be burned. (safely destructure nested js objects)

ECMAscript 6 has a lot of features. One of them is Destructuring Assignment with Deep Matching which you can combine with Shorthand Notation... so you can do something like

var { foo, bar: { baz} } = someCall();
which is the same as 
var tmp = someCall();
var foo = tmp.foo;
var baz = tmp.bar.baz;
 
One interesting note when you use that kind of destructuring is that the intermediate variables aren't defined - e.g. you don't get a "bar" in this case - "bar" is just a signpost to the structure
 
The problem is, things are very unhappy if "bar" is undefined.

I'm not sure if there's any cool syntax that might say "please destructure this, and just give me back an undefined for nodes I am implying should exists even if they having missing parent" (Because "is not defined" errors are so much harsher than mere "undefined" variables despite the superficial similarity.) 

So the boring way is to break the destructuring into steps and use object matching default values:
var {foo, bar = {}} = someCall();
var {baz} = bar;

As I ask about this at work, it's interesting how many devs I hear express some dislike for all the new synactic hotness. And I agree, things (especially curly braces) are weirdly context dependent and then there are tricks like destructuring with renaming
var { foo : bar } = someCall(); 
//same as var bar = someCall()['foo'];
that feel like a weird mix up of left operand and right operands - as if the meaning of the : has done a 180 relative to a "normal" object creation (e.g. var foo = { bar : 123 })

No comments:

Post a Comment