ECMAScript 6 arrow functions

Question

var getTempItem = id => ({ id: id, name: "Temp" });

I know the above arrow function is equivalent to:

var getTempItem = function(id) {

    return {
        id: id,
        name: "Temp"
   };
};

But I'm a bit confused about the following

const Todo = ({ onClick, completed, text }) => (
  <li
    onClick={onClick}
    style={{
      textDecoration: completed ? 'line-through' : 'none'
    }}
  >
    {text}
 </li>
)

Why are the function arguments wrapped in curly braces, and the the function body is wrapped only in parentheses?

Answer 1

A few syntactic sugar elements of ES6 are at play here:

• Parameter destructuring : The function actually takes one object, but before the function is executed, its sole object parameter is deconstructed into three variables. Basically, if the argument passed to the function is called obj, then the onClick variable is assigned the value of obj.onClick, and same with the other named destructure variables.
• Concise arrow bodies : An arrow function that only needs one expression can use the concise form. For example, x => 2*x is an arrow function that returns its input times two. However, the ES6 grammar specification says that a curly brace after the arrow must be interpreted as a statement block. So in order to return an object using a concise body, you have to wrap the object expression in parentheses.
• JSX : Parentheses are commonly used around JSX expressions that need to span more than one line.

Bonus: One manner in which arrow functions are different from function declarations and function expressions is in the fact that in an arrow function (even one with a non-concise body), the values of arguments and this are the same as the containing scope. So calling an arrow function with .call or .apply will have no effect, and you need to use rest parameters if you want your arrow function to take a variable number of arguments.

Answer 2

Function body wrapped in parentheses returns the value of expression wrapped in parentheses.

var getTempItem = id => ({ id: id, name: "Temp" });
var getTempItem = id => {return { id: id, name: "Temp" }};
// Identical

Answer 3

Showing it with an example.

Parameter Destructuring:

Here you can see that while logEmployee function is taking in two parameters, we are only passing in the employee object as a part of the code. We are not passing individual parameters. So at runtime the employee object's contents are extracted to match the params that the function is expecting and are passed in accordingly.

const employee = {
 id: 1,
 name: "John",
 age: 28
}

const logEmployee = ({name, age}) => (
  console.log(name, age)
)

logEmployee(employee);

Note that only name and age are required by the function, so only those two properties will be destructured from the employee object.