Arrow Functions Back

1. Use arrow functions notation

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 function declaration.

/**
 * bad
 */
[1, 2, 3].map(function (x) {
    const y = x + 1;
    return x * y;
});

/**
 * good
 */
[1, 2, 3].map((x) => {
    const y = x + 1;
    return x * y;
});

2. Omit the braces(忽略大括號) and use the implicit(隱式) return

  • If the function body only has a single expression, feel free to omit the braces and use the implicit return. Otherwise, use a return statement.
  • Eslint rules tags: arrow-parens, arrow-body-style

Why? Syntactic sugar(語法糖). It reads well when multiple functions are chained together. Why not? If you plan on returning an object.

/**
 * 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}.`
});
  • If the expression spans over multiple lines, wrap it in parentheses(圓括號) for better readability.
/**
 * 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.`
));

3. Omit the parentheses(忽略圓括號)

  • If your function only takes a single argument, feel free to omit the parentheses.
  • Eslint rules tags: arrow-parens
/**
 * good
 */
[1, 2, 3].map(x => x * x);
[1, 2, 3].map((x, y) => x + y);

results matching ""

    No results matching ""