Arrow function syntax with parentheses instead of curly braces?

Question

I saw a code snippet in a React tutorial:

const App = ({title}) => (
  <div className="header">{title}</div>
);

At first glance, I thought it assigned an arrow function to the App constant. Then I noticed it doesn't use curly braces but parentheses.

I understand arrow function should be (...) => {...}, but here it uses (...) => (...)

So, is it an arrow function or not? If it is, why there is another form? How can I decide when to use which form? If it isn't, what's this function type called in js?

1. Yes. 2. Why not? 3. It's up to you, the braces are only required if you can't immediately return a value. 4. N/A. — jonrsharpe, Mar 09 '20 at 08:31
`(...args) => expr` is equivalent to `(...args) => { return expr; }` — a shortcut for a commonly used format. — Amadan, Mar 09 '20 at 08:32
Have you checked the [arrow functions documentation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions)? — claudiu.nicola, Mar 09 '20 at 08:33

score 7 · Accepted Answer · edited Aug 14 '22 at 10:00

7

Yes, it's also an arrow function. The only difference, is that if you don't use braces, it forces a return:

const App = () => { return true; } // with braces you've to use the return statement

const App = () => true; // without braces it forces the return statement automatically

The MDN arrow function expression documentation says the following about this:

Function body

Arrow functions can have either a "concise body" or the usual "block body".

In a concise body, only an expression is specified, which becomes the implicit return value. In a block body, you must use an explicit return statement.
var func = x => x * x;
// concise body syntax, implied "return"

var func = (x, y) => { return x + y; };
// with block body, explicit "return" needed

Furthermore, with regard to the parentheses: the arrow function in this case returns a JSX expression, which is considered a single object. Parentheses are mostly used for multi-line JSX code. See more information here: https://reactjs.org/docs/introducing-jsx.html and also the other similar question on Stack overflow.

edited Aug 14 '22 at 10:00

Community

1
1

answered Mar 09 '20 at 08:30

kosmosan

373
3
12

2

The second form is also only available for a single expression — you cannot use statements. – Amadan Mar 09 '20 at 08:31
@Amadan 's comment completes the answer. Good point there. – kosmosan Mar 09 '20 at 08:38
If my arrow function has multiple lines of logics before returning, should I use curly braces or parenthesis? Could you please give a direct answer to this question? – Leem Mar 09 '20 at 08:43
1

@Leem in that case you clearly don't have a choice; you *must* use braces, as you need the *body* of the function not just a return value. – jonrsharpe Mar 09 '20 at 08:48

score 0 · Answer 2 · answered Mar 09 '20 at 08:33

When you use the syntax:

const a = ({ foo }) => ( <Component /> );

This means that the code inside the brackets is inherently returned. I.e., the fat arrow the return is forced. Whereas this syntax:

const b = ({ bar }) => {
  some();
  thing();
};

This would indicate actions performed, but nothing is returned. Ie the 'return' keyword must be present for anything to be returned from the function, like this:

const c = ({ baz }) => { return <AnotherComponent />; }

The first and third examples with a return (implicit or otherwise) would be useful for reusable functions and/or components. The middle one where nothing is returned would be more useful for state management (mobx/redux/flux for example) where you'd need to implement HOF or functions that return state or objects.

Arrow function syntax with parentheses instead of curly braces?

2 Answers2

Function body

Linked

Related