Javascript object bracket notation ({ Navigation } =) on left side of assign
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?
Solution 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;
Solution 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;
Solution 3:
var { Navigation } = require('react-router');
... uses destructuring to achieve the same thing as ...
var Navigation = require('react-router').Navigation;
... but is far more readable.