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

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

• javascript
• reactjs
• ecmascript-6

• 2 It's ES6 destructuring assignment. – Pointy Commented Feb 16, 2015 at 4:03
• possible duplicate of Is var { Route, Redirect, RouteHandler, Link } = Router; valid in Javascript? – Qantas 94 Heavy Commented Feb 16, 2015 at 4:13
• @Qantas94Heavy, It's not quite a duplicate because the other question doesn't mention rest destructuring. – Brigand Commented Feb 16, 2015 at 4:33
• It's not part of a standard yet and best described in React docs: facebook.github.io/react/docs/transferring-props.html – WiredPrairie Commented Feb 16, 2015 at 11:47

1 Answer 1

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 :-)