7

I was reading the source code of Facebook's fixed-data-table, and i found this

var {left, ...props} = this.props;

What that it means? is this a new semantic? I'm confused o.O

Spike886
  • 609
  • 8
  • 23
  • 2
    It's ES6 destructuring assignment. – Pointy Feb 16 '15 at 04:03
  • possible duplicate of [Is var { Route, Redirect, RouteHandler, Link } = Router; valid in Javascript?](http://stackoverflow.com/questions/27136394/is-var-route-redirect-routehandler-link-router-valid-in-javascript) – Qantas 94 Heavy Feb 16 '15 at 04:13
  • @Qantas94Heavy, It's not quite a duplicate because the other question doesn't mention rest destructuring. – Brigand Feb 16 '15 at 04:33
  • It's not part of a standard yet and best described in React docs: http://facebook.github.io/react/docs/transferring-props.html – WiredPrairie Feb 16 '15 at 11:47

1 Answers1

16

It's a special form of destructuring assignment proposed for ES7 (and eagerly implemented in the jsx tools and Babel). It creates two variables: left, and props.

left has the value of this.props.left.

props is an object with all of the other properties of this.props (excluding left).

If you wrote it without destructuring it'd look like this:

var left = this.props.left;
var props = {};

Object.keys(this.props).forEach(function(key, index){
    if (key !== 'left') {
        props[key] = this.props[key];
    }
}, this);

That's more than a few characters shaved off :-)

Brigand
  • 84,529
  • 20
  • 165
  • 173
  • Can you provide a link for this type of "rest destructuring"? It doesn't work in Traceur for me at least. –  Feb 16 '15 at 04:41
  • https://people.mozilla.org/~jorendorff/es6-draft.html#sec-destructuring-assignment (edit: and 12.14.5.4) – Brigand Feb 16 '15 at 04:42
  • This reference does not describe the syntax here. It describes a syntax for destructuring assignment involving arrays, as in `var [a, ...b] = [1, 2, 3]`. I've never seen the syntax shown here, which is not to say it doesn't exist... –  Feb 16 '15 at 04:45
  • ObjectAssignmentPattern has a AssignmentPropertyList has a AssignmentProperty has a AssignmentElement has a DestructuringAssignmentTarget. – Brigand Feb 16 '15 at 04:47
  • 1
    Any idea why Traceur chokes on that? Any ES6 processors that support it? Why do resources such as http://www.2ality.com/2015/01/es6-destructuring.html not mention that? What name would this syntax be given in the kangax compatibility tables? –  Feb 16 '15 at 04:50
  • I could be wrong. It is supported in the jsx compiler, and 6to5 (now called babel). – Brigand Feb 16 '15 at 04:51
  • 1
    6to5 gives me a syntax error on the line in question. However, it works with the `--experimental` flag. I think it may be purely a JSX extension, or ES7 thing, in which case people should be warned away from it. I have no idea if there's any discussion about actually adding this syntax to the spec, but personally it seems weird to me, since I always thought of rest and spread as being fundamentally about array elements. –  Feb 16 '15 at 04:55
  • 1
    I found this: https://github.com/sebmarkbage/ecmascript-rest-spread. It says "It is a Stage 1 proposal for ECMAScript 7." –  Feb 16 '15 at 04:58
  • Thanks for the catch, I updated the answer with your link and explanation. What I saw in the spec was referring to `var {a, d: {b, c}} = x;` (I think) – Brigand Feb 16 '15 at 05:06
  • 1
    torazaburo thanks you clued me into the need to add a special babel plugin to get it to work: https://babeljs.io/docs/plugins/transform-object-rest-spread/ – ChetPrickles Aug 12 '16 at 19:37