Unexpected function expression. (prefer-arrow-callback)

Question

I am receiving three errors in the below code with eslint , whilst the function appears to be working as intended in the application.

Errors:

[eslint] Unexpected unnamed function. (func-names)
[eslint] Unexpected function expression. (prefer-arrow-callback)
[eslint] Do not access Object.prototype method 'hasOwnProperty' from target object. (no-prototype-builtins)

Code:

const getCount = campaignData.reduce(function(acc, curr) {
  if (!acc.hasOwnProperty(curr.status)) {
    acc[curr.status] = 1
  } else {
    acc[curr.status] += 1
  }
  return acc;    
}, {});

I am using within the render of a ReactJS component for use as {getCount.active} .

As it is working, should I ignore it?

Answer 1

Thats what the linter means:

[eslint] Unexpected unnamed function. (func-names)

Giving proper names to functions makes error stacks more readable, error at accumulate is way more expressive then error at anonymous so it recommends you to change:

 function(acc, curr)

To

 function accumulate(acc, curr)

Alternatively you can follow this advice:

[eslint] Unexpected function expression. (prefer-arrow-callback)

If you don't need this inside a function you could use the arrow functions syntax instead, its a bit shorter.

 function(acc, curr) {

becomes

 (acc, curr) => {

[eslint] Do not access Object.prototype method 'hasOwnProperty' from target object. (no-prototype-builtins)

Inherited classes might override that by accident, so it recommends you to use:

 curr.status in acc

But all those hints are actually just some improvements of readability, there is no functional difference.

As it is working, should I ignore it?

If you think that "code is good if it is working" then yes, otherwise not.