Airbnb ESLint Function amd Arrow Function Declaration

The following is wrong function declaration with warning.

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

Instead, you are expected to provide a function name.

// goodconst 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.

// acceptableconst 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 bodyconst 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);

// goodnumbers.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: