Arrow Functions

  • 8.1 When you must use an anonymous function (as when passing an inline callback), use arrow function notation. eslint: prefer-arrow-callback, arrow-spacing

    Why? It creates a version of the function that executes in the context of this, which is usually what you want, and is a more concise syntax.

    Why not? If you have a fairly complicated function, you might move that logic out into its own named function expression.

    1. // bad
    2. [1, 2, 3].map(function (x) {
    3.   const y = x + 1;
    4.   return x * y;
    5. });
    7. // good
    8. [1, 2, 3].map((x) => {
    9.   const y = x + 1;
    10.   return x * y;
    11. });

  • 8.2 If the function body consists of a single statement returning an expression without side effects, omit the braces and use the implicit return. Otherwise, keep the braces and use a return statement. eslint: arrow-parens, arrow-body-style

    Why? Syntactic sugar. It reads well when multiple functions are chained together.

    ``javascript // bad [1, 2, 3].map(number => { const nextNumber = number + 1;A string containing the ${nextNumber}.`;
    });

    // good
    [1, 2, 3].map(number => A string containing the ${number}.);

    // good
    [1, 2, 3].map((number) => {
    const nextNumber = number + 1;
    return A string containing the ${nextNumber}.;
    });

    // good
    [1, 2, 3].map((number, index) => ({

  1.   [index]: number,
  2. }));
  4. // No implicit return with side effects
  5. function foo(callback) {
  6.   const val = callback();
  7.   if (val === true) {
  8.     // Do something if callback returns true
  9.   }
  10. }
  12. let bool = false;
  14. // bad
  15. foo(() => bool = true);
  17. // good
  18. foo(() => {
  19.   bool = true;
  20. });
  21. ```

  • 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.

    1. // bad
    2. ['get', 'post', 'put'].map(httpMethod => Object.prototype.hasOwnProperty.call(
    3.     httpMagicObjectWithAVeryLongName,
    4.     httpMethod,
    5.   )
    6. );
    8. // good
    9. ['get', 'post', 'put'].map(httpMethod => (
    10.   Object.prototype.hasOwnProperty.call(
    11.     httpMagicObjectWithAVeryLongName,
    12.     httpMethod,
    13.   )
    14. ));

  • 8.4 If your function takes a single argument and doesn’t use braces, omit the parentheses. Otherwise, always include parentheses around arguments for clarity and consistency. Note: it is also acceptable to always use parentheses, in which case use the “always” option for eslint. eslint: arrow-parens

    Why? Less visual clutter.

    1. // bad
    2. [1, 2, 3].map((x) => x * x);
    4. // good
    5. [1, 2, 3].map(x => x * x);
    7. // good
    8. [1, 2, 3].map(number => (
    9.   `A long string with the ${number}. It’s so long that we don’t want it to take up space on the .map line!`
    10. ));
    12. // bad
    13. [1, 2, 3].map(x => {
    14.   const y = x + 1;
    15.   return x * y;
    16. });
    18. // good
    19. [1, 2, 3].map((x) => {
    20.   const y = x + 1;
    21.   return x * y;
    22. });

  • 8.5 Avoid confusing arrow function syntax (=>) with comparison operators (<=, >=). eslint: no-confusing-arrow

    1. // bad
    2. const itemHeight = item => item.height > 256 ? item.largeSize : item.smallSize;
    4. // bad
    5. const itemHeight = (item) => item.height > 256 ? item.largeSize : item.smallSize;
    7. // good
    8. const itemHeight = item => (item.height > 256 ? item.largeSize : item.smallSize);
    10. // good
    11. const itemHeight = (item) => {
    12.   const { height, largeSize, smallSize } = item;
    13.   return height > 256 ? largeSize : smallSize;
    14. };

  • 8.6 Enforce the location of arrow function bodies with implicit returns. eslint: implicit-arrow-linebreak

    1. // bad
    2. (foo) =>
    3.   bar;
    5. (foo) =>
    6.   (bar);
    8. // good
    9. (foo) => bar;
    10. (foo) => (bar);
    11. (foo) => (
    12.    bar
    13. )