Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

People also ask

What is bracket notation in JavaScript?

The alternate syntax for accessing object properties is known as bracket notation. In bracket notation, the object name is followed by a set of square brackets. Inside the square brackets, the property name is specified as a string. The previous example of dot notation has been rewritten below to use bracket notation.

What is the difference between DOT and bracket notation in a JavaScript object?

Key DifferencesDot notation is faster to write and easier to read than bracket notation. However, you can use variables with bracket notation, but not with dot notation. This is especially useful for situations when you want to access a property but don't know the name of the property ahead of time.

What is object notation in JS?

In computing, JavaScript Object Notation (JSON) (/ˈdʒeɪsən/ "Jason") is an open-standard file format that uses human-readable text to transmit data objects consisting of attribute–value pairs and array data types (or any other serializable value).

What do square brackets do in JavaScript?

The [] operator converts the expression inside the square brackets to a string. For instance, if it is a numeric value, JavaScript converts it to a string and then uses that string as the property name, similar to the square bracket notation of objects to access their properties.


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;

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;

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

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

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

... but is far more readable.


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;