Declaring Const With Curly Braces in JSX
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
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.