Arrow function without curly braces

Question

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');
};

Solution 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) => (
  "hello " + who + "!"
);
const d = (who) => (
  "hello "
    + who
    + "!"
);
const e = (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

Solution 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

Solution 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 };

Solution 4

Parenthesis are used in an arrow function to return an object.

() => ({ name: 'YourName' })  // This will return an object

That is equivalent to

() => {
   return { name : 'YourName' }
}

Solution 5

Parenthesis has an implicit return statement while curly braces you need an explicit return statement

View more solutions

Comments

[Bergi]

See also Curly Brackets in Arrow Functions

[dkimot]

Awesome, thank you. That also helps me understand some other errors I've been getting. I'll accept that as correct once I can. Thanks david

[GrayedFox]

One can also use curly braces to prevent an arrow function from returning a value -- or to make it obvious that a single line arrow function shouldn't return anything. Check my answer for an example (couldn't format it nicely as a comment).

[Tanckom]

I get GrayedFox idea, however, why did somebody even implement this? Seems kinda tricky to me as maybe in a special case you're not sure if it should be () or {}

[vikramvi]

so I can use "return" only with curly braces and not with parenthesis ? If YES why is that ?

[vikramvi]

so I can use "return" only with curly braces and not with parenthesis ? If YES why is that ?

[AmerllicA]

@vikramvi, see, it is just a simple syntax, when your function doesn't have anything inside execution context so just make it simple with less code, => without curly braces means return, simple to read, easy to understand, less in bundle size. see, it is pure beauty.

[vikramvi]

Thanks for info, I understood that; but my question was; it is possible to use "return" with ( ) as well ?

[AmerllicA]

@vikramvi, Obviously no.

[Alan Evangelista]

@vikramvi Because the parentheses mean the function will return the result of the single statement inside them, i.e. const x = () => (x) is equal to const x = () => {return x} . You can always use the curly braces, but you can use the parentheses instead for returning a value from a single statement concisely.

[vikramvi]

@AlanEvangelista Thanks for clarification. JS is flexible and confusing as well same time; in Java we had strict ways of doing particular things and avoiding such confusions :)