Declaring Const With Curly Braces in JSX

Question

I'm just getting started with React Native and getting used to JSX syntax. Is that what I'm talking about? Or am I talking about TypeScript? Or... ES6? Anyway...

I've seen this:

const { foo } = this.props; 

Inside a class function. What is the purpose of the curly braces and what's the difference between using them and not using them?

Answer 1

It is destructuring assignment.

The destructuring assignment syntax is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables.

Example (ES6):

var person = {firstname: 'john', lastname: 'doe'};  const firstname = person.firstname; const lastname = person.lastname;  // same as this const { firstname, lastname } = person; 

You can find more info at MDN

EDIT: also for developers familiar with Python language it can be interesting to compare with Python unpacking syntax. Python2.7:

>>> _tuple = (1, 2, 3) >>> a, b, c = _tuple >>> print(a, b, c) (1, 2, 3) 

With new feature of Python3, like PEP 3132 you can also do following:

>>> _range = range(5) >>> a, *b, c = _range >>> print(a, b, c) 0 [1, 2, 3] 4 

Examples are added, because knowing already similar approach from other languages you can grasp JS idea more quicker.