Arrow function without curly braces

问题

I\'m new to both ES6 and React and I keep seeing arrow functions. Why is it that some arrow functions use curly braces after the fat arrow and some use parentheses? For example:

const foo = (params) => (
    <span>
        <p>Content</p>
    </span>
);

vs.

const handleBar = (e) => {
    e.preventDefault();
    dispatch(\'logout\');
};

Thanks for any help!

回答1:

The parenthesis are returning a single value, the curly braces are executing multiple lines of code.

Your example looks confusing because it's using JSX which looks like multiple "lines" but really just gets compiled to a single "element."

Here are some more examples that all do the same thing:

const a = (who) => "hello " + who + "!";
const b = (who) => (
    "hello " + 
    who + 
    "!"
);
const c = (who) => {
  return "hello " + who + "!";
};

You will also often see parenthesis around object literals because that's a way to avoid the parser treating it as a code block:

const x = () => {} // Does nothing
const y = () => ({}) // returns an object

回答2:

One can also use curly braces to prevent a single line arrow function from returning a value -- or to make it obvious to the next developer that a single line arrow function shouldn't, in this case, be returning anything.

For example:

const myFunc = (stuff) => { someArray.push(stuff) }
const otherFunc = (stuff) => someArray.push(stuff)

console.log(myFunc())    // --> logs undefined
console.log(otherFunc()) // --> logs result of push which is new array length

回答3:

Actually in a briefcase when somebody uses braces in an arrow function declaration, it is equal to below:

const arrow = number => number + 1;

|||

const arrow = (number) => number + 1;

|||    

const arrow = (number) => ( number + 1 );

|||

const arrow = (number) => { return number + 1 };

回答4:

In your first example, the right-hand side of the arrow function shows a single expression that is enclosed by a grouping operator:

const foo = (params) => (
  <span>
    <p>Content</p>
  </span>
);

A similar comparable case would be the following:

const foo = (params) => (<span><p>Content</p></span>);

A distinction, in the above cases using single expressions, is that the right-hand side is the returned value of the function.

On the other hand, if you use curly braces, JavaScript will understand that as a statement:

const foo = (params) => {} // this is not an object being returned, it's just an empty statement

Therefore, using statement is a good start for you to have code in it, multiple lines, and it will require the use of "return" if the function is intended to return value:

const foo = (params) => {
    let value = 1; 
    return value;
}

In case you wanted to return an empty object in the shortest form:

const foo = (params) => ({})

See tests

来源：https://stackoverflow.com/questions/39629962/arrow-function-without-curly-braces

标签

javascript

ecmascript-6

react-jsx

arrow-functions