Airbnb ESLint Function amd Arrow Function Declaration

December 18, 2017

Based on Airbnb JavaScript Style Guide.

The following is wrong function declaration with warning.

// error: http://eslint.org/docs/rules/func-names  Unexpected unnamed function
const wrongFunction = function () {
  console.log('wrong');
};

Instead, you are expected to provide a function name.

// good
const doSomething = function doSomethingMoreDescriptiveName() {
  console.log('something')
}

If you dislike this behaviour, you can turn if off by editing .eslintrc.js.

module.exports = {
  ...
  extends: 'airbnb-base',
  ...
  'rules': {
    ...
    'func-names': 0,
  }
}

Alternatively, you can use anonymous function.

// acceptable
const anonymouFunction = () => {
  console.log('anonymou');
};

Read more about Airbnb JavaScript Function Style.

Anonymous function (arrow callback)

The following codes are wrong.

// error: http://eslint.org/docs/rules/no-unexpected-multiline  Unexpected newline between object and [ of property access
// error: http://eslint.org/docs/rules/no-sequences             Unexpected use of comma operator
// error: http://eslint.org/docs/rules/prefer-arrow-callback    Unexpected function expression
[1, 2, 3].map(function (x) {
  return x + 1;
});
// error: http://eslint.org/docs/rules/arrow-body-style  Unexpected block statement surrounding arrow body
const numbers = [1, 2, 3];
numbers.map((x) => {
  return x + 1;
});

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.

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.

Example of good anonymous arrow callback.

// good: single parameter(x) ommit bracket, single expression return ommit braces and return statement.
const numbers = [1, 2, 3];
numbers.map(x => x + 1);

// error: http://eslint.org/docs/rules/arrow-parens  Unexpected parentheses around single function argument having a body with no curly braces 
numbers.map((x) => x + 1);
// good
numbers.map(x => (
    `Hello ${x}, this is long expression.`
));
// good: multi parameters(number, index) include bracket, single expression return ommit braces and return statement.
numbers.map((number, index) => index + number);
// good: map numbers to object, use [index] as object prop key (else assume the prop key is 'index')
numbers.map((number, index) => (
  { [index]: number }
))

// error: http://eslint.org/docs/rules/no-unused-vars  'index' is defined but never used  
numbers.map((number, index) => (
  { index: number }
))
// good: no parameter include bracket, single expression return ommit braces and return statement.
numbers.map(() => 1);
// good: non-single expression return must include parameter bracket(x), braces and return statement.
numbers.map((x) => {
  const y = x + 1;
  return x + y;
});

// error: http://eslint.org/docs/rules/arrow-parens  Expected parentheses around arrow function argument having a body with curly braces  
numbers.map(x => {
  const y = x + 1;
  return x + y;
});

Note: for better and worst, this is too much confusion.

Read more about Airbnb JavaScript Arrow Function Style.

References:

This work is licensed under a
Creative Commons Attribution-NonCommercial 4.0 International License.