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

Question

I read the source code of the fixed data table on Facebook and I found this

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

What does it mean? is this new semantics? I'm confused oO

Answer 1

This is a special form of destructuring assignment proposed for ES7 (and is readily implemented in jsx and Babel tools). It creates two variables: left and props .

left matters this.props.left .

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

If you wrote it without restructuring, it will 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); 

More than a few characters are shaved :-)