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?
A few syntactic sugar elements of ES6 are at play here:
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.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments