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?

Platinum Azure · Accepted Answer · 2016-08-14 04:38:32Z

9

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.

answered Aug 14, 2016 at 4:38

Platinum Azure

46.4k13 gold badges112 silver badges136 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

KumarM Over a year ago

Just to add to the above well explained answer, here's a nice write up on parameter destructuring: leanpub.com/understandinges6/…

TA3 Over a year ago

AddTodo = connect()(AddTodo) Can you explain what's going on here?

TA3 Over a year ago

Complete source code here

Platinum Azure Over a year ago

@TA3 connect() returns a function, which is itself called with a value AddTodo. Read the documentation of the library you are using in order to know exactly what that code does.

xblymmx · Accepted Answer · 2016-08-14 04:49:13Z

1

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

answered Aug 14, 2016 at 4:49

xblymmx

593 silver badges3 bronze badges

Comments

KumarM · Accepted Answer · 2016-08-14 17:06:02Z

1

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.

edited Aug 14, 2016 at 17:06

answered Aug 14, 2016 at 5:11

KumarM

1,6991 gold badge18 silver badges26 bronze badges

Collectives™ on Stack Overflow

ECMAScript 6 arrow functions

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related