Const declaration with curly braces in JSX

Question

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

I have seen that:

const { foo } = this.props;

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

Answer 1

This appointment destructuring .

Destructuring destination syntax is a JavaScript expression that allows you to unpack values ​​from arrays or properties from objects into various variables.

Example (ES6):

var person = {firstname: 'john', lastname: 'doe'};

const firstname = person.firstname;
const lastname = person.lastname;

// same as this
const { firstname, lastname } = person;

Further information can be found on MDN.

EDIT: , Python, Python. Python2.7:

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

Python3, PEP 3132, :

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

, , , JS.

Answer 2

Yes this is destructuring assignment feature of ECMASCRIPT 6

For Example : 

const { createElement } = React
const { render } = ReactDOM

const title = createElement('h1',{id: 'title', className: 'header'},'Hello 
    World')

render(title,document.getElementById('react-container'))

here React  = { cloneElement : function(){},createElement : function()
   {},createFactory : function(),......}