JavaScript: var {left, …props} = this.props;

Question

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 oO

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