Curly braces declaring a variable in React

Question

Studying React right now. I am on the stage of Router and found some code in their documentation that I do not understand. (they use a lot of short-syntax operators and other stuff so it is hard to google or come up with idea what it is for).

So here is code :

const { from } = this.props.location.state || { from: { pathname: "/" } };
const { redirectToReferrer } = this.state;

While declaring "something" on the left it is inside of { } , why?

Answer 1

for those who are really still confused about object destructuring, I can give an example:

suppose you have an object called car

const car = {
  type: 'van',
  model: 'honda',
  ...etc,
}

then instead of making a repetition of calling some variables inside the car object like this:

const type = car.type;
const model = car.model;

you can use destructuring object and write it in a more simple way:

const { type, model } = car;

Answer 2

It is called object destructuring. It's a JavaScript expression that allows us to extract data from arrays, objects, maps and sets. Please refer to link below for more details.

https://hacks.mozilla.org/2015/05/es6-in-depth-destructuring/

Answer 3

It is part of ECMASCRIPT 2015 (ES6). Basically, Destructuring assignment is a special syntax that allows us to “unpack” arrays or objects into a bunch of variables, as sometimes they are more convenient . Destructuring also works great with complex functions that have a lot of parameters, default values etc. For Futher information about destructing assignments or es6 features this link helps alot