Curly Brakets in Es2015

Question

I read some tweets and I stumbled upon this tweet Dan Abromov

The syntax bothers me.

const Font = ({ children }) => 
 <Block...

What is the meaning {} around children? It is clear that this is not an object. I assume its function is ES2015.

Many thanks

Answer 1

This is a destructive binding template. It indicates that the parameter childrenshould be bound to the property value of the childrenobject passed to the function.

Try this in ES2015:

function x({ foo }) {
  console.log(foo);
}

x({ hello: "world", foo: "bar", well: "that all"});

The string "bar" will be written to the console, because the value of the "foo" property of the object is passed to the function.

, , "children", , undefined.