CODEWITHSUNDEEP
javascriptwebpackecmascript-6
captainill
captainill

Reputation: 2079

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?

Upvotes: 145

Views: 19541

Answers (5)

Akin Zeman
Akin Zeman

Reputation: 507

instead of

const salary = personnel.salary
const sex = personnel.sex
const age = personnel.age

simply

const {salary, age, sex} = personnel

Upvotes: 2

Rajendra kumar Vankadari
Rajendra kumar Vankadari

Reputation: 2387

It's a new feature in ES6 to destructure objects.

As we all know that there is an assignment operation taking place here, which means right side value is getting assigned to left side variable.

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

In this case require('react-router') method returns an object with key-value pair, something like:

{ Navigation: function a(){}, 
Example1: function b(){},
 Example2: function c(){}
}

And if we would like to take one key in that returned object say Navigation to a variable we can use Object destructuring for that.

This will only be possible only if we have the key in hand.

So after the assignment statement, local variable Navigation will contain function a(){}

Another example looks like this.

var { p, q } = { p: 1, q:2, r:3, s:4 };
console.log(p) //1;
console.log(q) //2;

Upvotes: 9

Cliff Hall
Cliff Hall

Reputation: 753

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

... uses destructuring to achieve the same thing as ...

var Navigation = require('react-router').Navigation;

... but is far more readable.

Upvotes: 26

Rudolf Manusachi
Rudolf Manusachi

Reputation: 2346

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;

Upvotes: 121

Matt Ball
Matt Ball

Reputation: 359786

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;

Upvotes: 145

Related Questions