What is `var { comma, separated, list } = name;` in JavaScript? [duplicate]

Question

I haven't seen this syntax before and am wondering what it's all about.

var { Navigation } = require('react-router'); 

The brackets on the left are throwing a syntax error:

unexpected token {

I'm not sure what part of the webpack config is transforming or what the purpose of the syntax is. Is it a Harmony thing? Can someone enlighten me?

Answer 1

It's called destructuring assignment and it's part of the ES2015 standard.

The destructuring assignment syntax is a JavaScript expression that makes it possible to extract data from arrays or objects using a syntax that mirrors the construction of array and object literals.

Source: Destructuring assignment reference on MDN

Object destructuring

 var o = {p: 42, q: true};  var {p, q} = o;   console.log(p); // 42  console.log(q); // true    // Assign new variable names  var {p: foo, q: bar} = o;   console.log(foo); // 42  console.log(bar); // true 

Array destructuring

var foo = ["one", "two", "three"];  // without destructuring var one   = foo[0]; var two   = foo[1]; var three = foo[2];  // with destructuring var [one, two, three] = foo; 

Answer 2

This is destructuring assignment. It's a new feature of ECMAScript 2015.

var {   AppRegistry,   StyleSheet,   Text,   View, } = React; 

Is the equivalent to:

var AppRegistry = React.AppRegistry; var StyleSheet = React.StyleSheet; var Text = React.Text; var View = React.View;