Javascript ES6 Difference between ()=>() and ()=>{}

Question

I have seen a code something like while learning React

const LinkCell = ({rowIndex, data, col, ...props}) => (
  <Cell {...props}>
    <a href="#">{data.getObjectAt(rowIndex)[col]}</a>
  </Cell>
);

Also, so far I thought that in ES6 function shorthand is

let sum = (a, b)=>{
   return a + b;
}

How the first one is different from the second one ?

the second one can also be written - `let sum = (a, b)=> a + b;` — Jaromanda X, Nov 28 '16 at 02:27
With `()=>()` the second set of parentheses is for grouping, so it doesn't need the `return` keyword that you'd need with `{}`. — nnnnnn, Nov 28 '16 at 02:30
@nnnnnn `() => (...)` is for React's JSX. It signifies the JSX if I'm not mistaken. But `=> {...}` creates a new block with statements while `=> (...)` is like `=> { return (...) }`. The value after the arrow is the returned value unless you create a new block - implicitly. — Andrew Li, Nov 28 '16 at 02:31
@AndrewLi - I don't use JSX, but `()=>()` is perfectly valid in plain (ES6) JS (assuming you actually put something inside the second parentheses). — nnnnnn, Nov 28 '16 at 02:32
The difference is with the parens the function body must be a single expression; with braces it will be one or more statements. — aeb0, Nov 28 '16 at 02:46
@AndrewLi: The `(...)` have nothing to do with JSX. They seem to be added for readability only. They could as well be omitted without any change in functionality. — Felix Kling, Nov 28 '16 at 05:25
@FelixKling I've never thought about it that way, but that's correct. It's just grouping after all. — Andrew Li, Nov 28 '16 at 05:26

Aruna · Answer 1 · 2016-11-28T02:40:34.067

2

() => () is a one liner shorthand of () => { doSomething() OR return; }.

Anyways, if you need more manipulations and need more than one line statement, you should go for () => {} syntax otherwise you can use a shorthand syntax () => ()

The following are also treated as one line statement. But to use with () => () syntax, you need to rewrite it without return statement,

// The below one line statement can be rewritten as below
if (true ) return something;

// rewritten of above one
() => ( a > b ? a : b)

// one line statement
if (true ) invoke();  // This will go like, () => (a ? a.invoke() : b.invoke())

// one line statement
for(var i in results) doSomething();

//And your jsx statement which can be tread as one liner
<Cell {...props}>
    <a href="#">{data.getObjectAt(rowIndex)[col]}</a>
  </Cell>

edited Nov 28 '16 at 02:40

answered Nov 28 '16 at 02:34

Aruna

11,959
3
28
42

`(...) => (...);` is for returning JSX in stateless components in React. It's equivalent to `(...) => { return (...); }`. `(...)` signifies JSX. – Andrew Li Nov 28 '16 at 02:35
yeah agreed, this `jsx` is treated as one line statement such as `if (true ) invoke();` – Aruna Nov 28 '16 at 02:36
Thanks for the explanation. Unfortunately, I think I can't up vote with my current reputation. – Nitin Agarwal Nov 28 '16 at 02:42
*"() => () is a one liner shorthand of () => { doSomething() OR return; }."* No, it's would be equivalent to `() => { return (); }`. – Felix Kling Nov 28 '16 at 05:26

score 1 · Accepted Answer · answered Nov 28 '16 at 02:28

1

with the ()=> () syntax imagine if there was an implicit return statment e.g. () => {return ()}

answered Nov 28 '16 at 02:28

derp

2,300
13
20

1

It would be highly useful to provide the correct terminology for this form, which is "concise body". – Nov 28 '16 at 05:59

Javascript ES6 Difference between ()=>() and ()=>{}

2 Answers2