Arrrow functions in JavaScript ES6 - with and without curly braces

Question

Like to ask about the differences in ES6 in function syntax - with and without curly braces.

both functions are working:

Thanks.

Reading [the documentation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions) is always useful. — Teemu, Sep 20 '18 at 17:15
A single statement does not need curly braces. More than that does. See "concise body vs. usual block body" [here](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions#Function_body). — jfriend00, Sep 20 '18 at 17:25

score 3 · Accepted Answer · answered Sep 20 '18 at 17:16

welcome to Stackoverflow!

Indeed these functions without curly braces are a shorthand version that differs in some nuances.

the most important differences are:

they can have only one statement. (e.g. () => 20 * 5)
they automatically return the value of that statement (above example would return the value 100)

Sticking to the example above, the more classic version to write this would be () => {return 20 * 5}

1 Answers1