Brackets around parameters - why?

Question

I looked at this in a tutorial:

const Todos = ({todos}) => (
  <div>
    <h1>Todos</h1>
    {todos.map(todo => <p key={todo}>{todo}</p>)}
  </div>
)

Why does the parameter have bindings around it? If I wrote this myself, the first line would look like this:

const Todos = (todos) => (...

Is this some kind of wacky new ES6 syntax that I just can't find documented?

Answer 1

This is the syntax for the destruction of a parameter object that was introduced as part of ECMAScript 2015. The function Todosdoes not define a single parameter with a name Todos, but instead refers to the Todosproperty of the object that passed (and it is destroyed immediately).

This is roughly equivalent to the following version:

const Todos = (_param) => {
  let todos = _param.todos;
  return (
    <div>
      <h1>Todos</h1>
      {todos.map(todo => <p key={todo}>{todo}</p>)}
    </div>
  );
};

.