Airbnb ESLint Function amd Arrow Function Declaration

Dec 18, 2017

Based on Airbnb JavaScript Style Guide.

The following is wrong function declaration with warning.

// error:  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:  Unexpected newline between object and [ of property access// error:             Unexpected use of comma operator// error:    Unexpected function expression[1, 2, 3].map(function (x) {  return x + 1;});
// error:  Unexpected block statement surrounding arrow bodyconst numbers = [1, 2, 3]; => {  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]; => x + 1);// error:  Unexpected parentheses around single function argument having a body with no curly braces => x + 1);
// => (    `Hello ${x}, this is long expression.`));
// good: multi parameters(number, index) include bracket, single expression return ommit braces and return, index) => index + number);
// good: map numbers to object, use [index] as object prop key (else assume the prop key is 'index'), index) => (  { [index]: number }))// error:  'index' is defined but never used, index) => (  { index: number }))
// good: no parameter include bracket, single expression return ommit braces and return => 1);
// good: non-single expression return must include parameter bracket(x), braces and return => {  const y = x + 1;  return x + y;});// error:  Expected parentheses around arrow function argument having a body with curly braces => {  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.


❤️ Is this article helpful?

Buy me a coffee ☕ or support my work via PayPal to keep this space 🖖 and ad-free.

Do send some 💖 to @d_luaz or share this article.

✨ By Desmond Lua

A dream boy who enjoys making apps, travelling and making youtube videos. Follow me on @d_luaz

👶 Apps I built

Travelopy - discover travel places in Malaysia, Singapore, Taiwan, Japan.