This is an issue when passing a function reference directly to array iterator methods like map, forEach, filter, find, some, every, reduce, reduceRight, or flatMap.

Why is this an issue?

Array iterator methods in JavaScript pass multiple arguments to their callback functions: the current element, the index, and the entire array. When you pass a function reference directly to these methods, the function receives all these arguments, not just the element.

This can cause unexpected behavior in two scenarios:

1. Function signature changes: If the referenced function is later modified to accept additional parameters, it may start using the index or array arguments unintentionally, leading to different behavior.
2. Unintended parameter usage: The function might already accept multiple parameters for other purposes, causing it to misinterpret the index or array as meaningful input.

For example, if you have [1, 2, 3].map(parseInt), the parseInt function receives both the element and the index. Since parseInt(string, radix) uses the second parameter as the radix, this produces unexpected results: [1, NaN, NaN] instead of [1, 2, 3].

This issue is particularly problematic when working with external libraries or modules that might change their function signatures in future versions, potentially breaking your code without any obvious indication.

What is the potential impact?

This can lead to subtle bugs that are difficult to debug, especially when:

• External dependencies update their function signatures
• Functions are refactored to accept additional parameters
• The unexpected behavior only manifests with certain data patterns

These bugs can cause incorrect data processing, application crashes, or security vulnerabilities if the unexpected parameters affect business logic or data validation.

How to fix?

Wrap the function reference in an arrow function or anonymous function to explicitly control which parameters are passed. This ensures only the intended arguments reach your function.

Non-compliant code example

const numbers = [1, 2, 3];
const result = numbers.map(parseInt); // Noncompliant

Compliant code example

const numbers = [1, 2, 3];
const result = numbers.map(element => parseInt(element));

Documentation

• eslint-plugin-unicorn - Rule no-array-callback-reference
• MDN - Array.prototype.map() - Documentation for the map method and its callback parameters
• MDN - Array iteration methods - Overview of all array iteration methods and their callback signatures