-2

Arrow functions can be written in a lot of different ways, are there any way that is "more correct"?

let fun1 = (a) => { return a; }
let fun2 = a => a;

Just like those cases above, is fun2 faster then fun1? What's the diference between them?

Gabriel Carneiro
  • 643
  • 5
  • 16
  • What does this Q/A explain that isn't explained in tutorials / [documentation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions) already? – Cerbrus May 15 '18 at 14:58
  • Possible dupolicate of https://stackoverflow.com/questions/29030747/what-does-arrow-function-mean-in-javascript – Attersson May 15 '18 at 15:00
  • And possible duplicate of https://stackoverflow.com/questions/28770415/ecmascript6-arrow-function-that-returns-an-object – Attersson May 15 '18 at 15:00
  • If anything, I think this is the most concise explanation, if I may say so myself: https://stackoverflow.com/a/40636875/476. Pondering of merging this here somehow. – deceze May 15 '18 at 15:01
  • Not sure about a merge but it will be deleted or marked as duplicate – Attersson May 15 '18 at 15:02
  • @deceze: Except that half the lines in the answer here are incorrect, poorly explained, or not even English. – Cerbrus May 15 '18 at 15:03
  • @Cerbrus I didn't say *this* question here, I said [that answer](https://stackoverflow.com/a/40636875/476) there. :) And I think it's good to have one canonical Q/A for this question to point to; the two duplicate suggested above certainly don't cut it. – deceze May 15 '18 at 15:04
  • Ah yes, @deceze. < instead of > :D I agree that one is much better. – Cerbrus May 15 '18 at 15:05
  • 1
    And, really, y'all? "Primarily opinion based"?! I *wish* ECMAScript syntax was opinion-based… ಠ_ಠ – deceze May 15 '18 at 15:59
  • @deceze: Do you really think this question should remain open? Wouldn't it be better to close it as a duplicate of one of the many targets? Or "Too broad"? Because it _is_ a duplicate, and it _is_ too broad. – Cerbrus May 16 '18 at 07:05
  • @Cerbrus Then pick a *good duplicate*. The two mentioned above certainly don't fit. I think it's a perfectly fair question, it's not entirely obvious what the rules for `()` and `{}` are in `=>` functions. The ECMAScript spec surely explains it, but it's quite dense and not very approachable. A canonical reference to point to (here) would be great. – deceze May 16 '18 at 07:23
  • I think the [one you linked](https://stackoverflow.com/questions/40636513/syntax-of-fat-arrow-functions-to-use-or-not-to-use-around-the-body/40636875#40636875) would be adequate, @deceze. The problem here is that it's already [explained very well in documentation like MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions). For future visitors, a link to MDN is more helpful than a incomplete answer here. – Cerbrus May 16 '18 at 07:26
  • @Cerbrus The *answer* is fine if I may say so, but the question is really more limited in scope than this here. And MDN… yes, MDN is always great, but IMO the problem with using that as the canonical reference is that it is not. With PHP you can point to *the* PHP manual; with Javascript you can't really. The best resources are all somewhat 3rd party. – deceze May 16 '18 at 07:39

2 Answers2

0

Arrow functions can be written in some diferent ways, like below:

// No params, just returns a string
const noParamsOnlyRet = () => 'lul';

// No params, no return
const noParamsNoRet = () => { console.log('lul'); };

// One param, it retuns what recives
const oneParamOnlyRet = a => a;

// Makes the same thing that the one above
const oneParamOnlyRet2 = a => { return a; };

// Makes the same thing that the one above
const oneParamOnlyRet3 = (a) => a; 

/* Makes the same thing that the one above, parentheses in return are optional,
 * only needed if the return have more then one line, highly recomended put 
 * objects into parentheses.
*/
const oneParamOnlyRet4 = (a) => (a);  

// Mult params, it returns the sum
const multParamsOnlyRet = (a, b) => a + b; 

// Makes the same thing that the one above
const multParamsOnlyRet2 = (a, b) => { return a + b; }

// Curly brackets are needed in multiple line arrow functions
const multParamsMultLines = (a, b) => { 
    let c = a + b;
    return c;
}

So we have some rules:

  • Parentheses around the params are needed when the function has none or more than one param, if it have just one, parentheses can be omitted.
  • If the function just have a return the curly brackets and the keyword return can be omitted, if it fits in one line
  • Curly brackets are needed if the function have more than one line or if it have no return.

As you can see, all of this are valid syntax for arrow functions, none of them is faster than the other, which one you use depends of the way that you code.

Gabriel Carneiro
  • 643
  • 5
  • 16
0

From

function(a){return a}

remove function and add => between the () and the {}:

(a) => {return a}

If you only have one argument, you can remove the brackets:

a => {return a}

if everything in the {} is a return statement, you can remove the {return ...} and leave just the statement:

a => a
Moritz Ringler
  • 9,772
  • 9
  • 21
  • 34
s123
  • 102
  • 9