Javascript object bracket notation ({ Navigation } =) on left side of assign

Question

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

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

The brackets on

Answer 1

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 some thing 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 destructing for that.

This will only be possible only if we have the key inhand.

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;