ESLint prefer-arrow-callback error

Question

I've got a problem with ESLint

Here is my function:

$productItem.filter(function (i, el) {
        return el.getBoundingClientRect().top < evt.clientY
    }).last()
    .after($productItemFull)

And Here is what ESLint tell me:

warning  Missing function expression name  func-names
error    Unexpected function expression    prefer-arrow-callback

How to solve this error?

Answer 1

It is basically saying to use Arrow function syntax in the filter callback function.

$productItem.filter((i, el) => el.getBoundingClientRect().top < evt.clientY)
    //              ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    .last()
    .after($productItemFull);

Here's what ESLINT documentation for prefer-arrow-callback says

Arrow functions are suited to callbacks, because:

• this keywords in arrow functions bind to the upper scope’s.

• The notation of the arrow function is shorter than function expression’s.

And, in following cases the error will be thrown

/*eslint prefer-arrow-callback: "error"*/

foo(function(a) { return a; });
foo(function() { return this.a; }.bind(this));

Your code is same same as the first snippet. So, the error prefer-arrow-callback is shown by ESLint.

To solve the error, you can

1. use Arrow function syntax(as shown above)

2. Suppress the error by using options and named function

   /*eslint prefer-arrow-callback: ["error", { "allowNamedFunctions": true }]*/
   
   foo(function bar() {});