This is an issue when using .filter() followed by array access methods like [0], .at(-1), .shift(), .pop(), or destructuring to get a single element from an array.

Why is this an issue?

Using .filter() to find a single element is inefficient and unclear in intent.

The .filter() method processes the entire array and creates a new array containing all matching elements. When you only need the first or last matching element, this approach has several problems:

• Performance overhead: .filter() continues processing even after finding matches, while .find() stops immediately upon finding the first match
• Memory waste: An intermediate array is created unnecessarily
• Unclear intent: The code suggests you want multiple elements when you actually want just one

The .find() method is specifically designed for finding the first matching element, and .findLast() for finding the last matching element. Both methods:

• Stop execution as soon as they find a match (or reach the end)
• Return the element directly, not wrapped in an array
• Make the code’s intent crystal clear

This pattern is especially problematic in performance-critical code or when working with large arrays, where the unnecessary processing can become a bottleneck.

What is the potential impact?

Using .filter() instead of .find() or .findLast() can lead to unnecessary performance overhead, especially with large arrays. The code also becomes less readable and maintainable, as the intent to find a single element is obscured by the filtering operation.

How to fix?

Replace .filter() followed by [0] or .shift() with .find() to get the first matching element more efficiently.

Non-compliant code example

const item = array.filter(x => isUnicorn(x))[0]; // Noncompliant
const item2 = array.filter(x => isUnicorn(x)).shift(); // Noncompliant

Compliant code example

const item = array.find(x => isUnicorn(x));
const item2 = array.find(x => isUnicorn(x));

Documentation

• eslint-plugin-unicorn - Rule prefer-array-find
• MDN - Array.prototype.find() - Official documentation for the Array.find() method
• MDN - Array.prototype.findLast() - Official documentation for the Array.findLast() method
• MDN - Array.prototype.filter() - Official documentation for the Array.filter() method