diff --git a/README.md b/README.md index 0ec7fec1..75aff342 100644 --- a/README.md +++ b/README.md @@ -593,16 +593,18 @@ ```javascript // bad [1, 2, 3].map(function (x) { - return x * x; + const y = x + 1; + return x * y; }); // good [1, 2, 3].map((x) => { - return x * x; + const y = x + 1; + return x * y; }); ``` - - [8.2](#8.2) If the function body fits on one line and there is only a single argument, feel free to omit the braces and parentheses, and use the implicit return. Otherwise, add the parentheses, braces, and use a `return` statement. + - [8.2](#8.2) If the function body consists of a single expression, feel free to omit the braces and use the implicit return. Otherwise use a `return` statement. > Why? Syntactic sugar. It reads well when multiple functions are chained together. @@ -610,12 +612,50 @@ ```javascript // good + [1, 2, 3].map(number => `A string containing the ${number}.`); + + // bad + [1, 2, 3].map(number => { + const nextNumber = number + 1; + `A string containing the ${nextNumber}.`; + }); + + // good + [1, 2, 3].map(number => { + const nextNumber = number + 1; + return `A string containing the ${nextNumber}.`; + }); + ``` + + - [8.3](#8.3) In case the expression spans over multiple lines, wrap it in parentheses for better readability. + + > Why? It shows clearly where the function starts and ends. + + ```js + // bad + [1, 2, 3].map(number => 'As time went by, the string containing the ' + + `${number} became much longer. So we needed to break it over multiple ` + + 'lines.' + ); + + // good + [1, 2, 3].map(number => ( + `As time went by, the string containing the ${number} became much ` + + 'longer. So we needed to break it over multiple lines.' + )); + ``` + + + - [8.4](#8.4) If your function only takes a single argument, feel free to omit the parentheses. + + > Why? Less visual clutter. + + ```js + // good [1, 2, 3].map(x => x * x); // good - [1, 2, 3].reduce((total, n) => { - return total + n; - }, 0); + [1, 2, 3].reduce((y, x) => x + y); ``` **[⬆ back to top](#table-of-contents)**