<div dir="ltr">Deconstructions are great, but have some pain points I'd like to address.<div><br></div><div><b>Named deconstructions</b></div><div><br></div><div>When deconstructing elements of an object/array, you lose any reference to the object itself. That reference is useful, not only in the trivial way of being able to simply use it as per normal, but to clarify intent.</div><div><br></div><div>```<br></div><div>const someMiddlewareFn = (original, updated, next) => {</div><div>  const [ { name }, { name: newName } ] = [ original, updated ]; // any useful deconstructions</div><div>  if (name !== newName) { // do stuff }</div><div>  return next(original, updated);<br>}</div><div>```</div><div>In that example we can't deconstruct `original` or `updated` in the parameter definition, because we have to keep references to them to pass to `next`; we have to do it in the function body, instead. </div><div><br></div><div>By keeping the named parameters, though, we glean more information as to the intent of the function: `original` and `updated` directly imply that we're comparing state changes. </div><div><br></div><div>There might also be occasions when we want to do something like this:</div><div><br></div><div>```</div><div><div>const { bar } = foo,</div><div>      { baz, blah } = bar;<br>```</div></div><div><br></div><div>Here, we might find it useful to get deconstructed references to both `bar` and its properties `baz` and `blah`, but we have to do it in two steps.</div><div><br></div><div>I propose that we use a symbol to signify that we wish to keep a reference, in passing. We should also allow for renaming, which is made slightly awkward because the current renaming syntax prevents further deconstruction.</div><div><br></div><div><b>Suggestion (using !-prefix)</b></div><div><b><br></b></div><div>```</div><div>const { !bar: { baz, blah } } = foo, // no renaming</div><div>      { bar: !myBar : { baz, blah } } = foo, // renaming</div><div><br></div><div>     someMiddlewareFn = (!original: { name }, !updated: { name: newName }, next) => {</div><div>        if (name !== newName) { // do stuff }</div><div>        return next(original, updated);</div><div>      </div><div>```<br></div><div>I think that this should be clear to interpret for both coders and JS engines.</div><div><br></div><div><b>Bound deconstructions</b></div><div><br></div><div>Some methods rely on their context being bound to their containers, and require extra binding faff if you want to extract them; this is the pain-point area that the binding operator proposal <a href="https://github.com/tc39/proposal-bind-operator">https://github.com/tc39/proposal-bind-operator</a> is intended to address.</div><div><br></div><div>My 2nd suggestion is that we co-opt its `::` syntax for use in deconstructions:</div><div><br></div><div>```</div><div>const { ::foo } = bar; </div><div>// equivalent to </div><div>// const foo = bar.foo.bind(bar)</div><div>```</div></div>