4

I was reading some tweets and I came across this tweet by Dan Abromov

The syntax has me confused.

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

What is the point of { } around children? Clearly its not an object. I presume its ES2015 feature.

Many thanks

Kayote
  • 14,579
  • 25
  • 85
  • 144

1 Answers1

5

It's a destructuring binding pattern. It indicates that the parameter children should be bound to the value of the children property of an object passed to the function.

Try this in an ES2015 environment:

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

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

The string "bar" will be logged to the console, because that's the value of the "foo" property of the object passed to the function.

If the value passed to the function is an object with no "children" property, of if it's not an object at all, then the parameter will be undefined.

Pointy
  • 405,095
  • 59
  • 585
  • 614