arrayFinds

Reports using .filter()[0] instead of .find() when looking for a single element.

✅ This rule is included in the ts stylistic and stylisticStrict presets.

When searching for the first item in an array matching a condition, using .filter(...)[0] is less efficient than using .find(...). The .find() method stops searching after finding the first match, whereas .filter() iterates through the entire array.

const 
const values: number[]
values = [1, 2, 3, 4, 5];
const 
const first: number
first = 
const values: number[]
values.
Array<number>.filter(predicate: (value: number, index: number, array: number[]) => unknown, thisArg?: any): number[] (+1 overload)
Returns the elements of an array that meet the condition specified in a callback function.
@param ― predicate A function that accepts up to three arguments. The filter method calls the predicate function one time for each element in the array.
@param ― thisArg An object to which the this keyword can refer in the predicate function. If thisArg is omitted, undefined is used as the this value.
filter((
value: number
value) => 
value: number
value > 3)[0];

const 
const users: {
    name: string;
}[]
users = [{ 
name: string
name: "Alice" }, { 
name: string
name: "Bob" }];
const 
const user: {
    name: string;
}
user = 
const users: {
    name: string;
}[]
users.
Array<{ name: string; }>.filter(predicate: (value: {
    name: string;
}, index: number, array: {
    name: string;
}[]) => unknown, thisArg?: any): {
    name: string;
}[] (+1 overload)
Returns the elements of an array that meet the condition specified in a callback function.
@param ― predicate A function that accepts up to three arguments. The filter method calls the predicate function one time for each element in the array.
@param ― thisArg An object to which the this keyword can refer in the predicate function. If thisArg is omitted, undefined is used as the this value.
filter((
user: {
    name: string;
}
user) => 
user: {
    name: string;
}
user.
name: string
name === "Alice")[0];

const 
const values: number[]
values = [1, 2, 3, 4, 5];
const 
const first: number | undefined
first = 
const values: number[]
values.
Array<number>.find(predicate: (value: number, index: number, obj: number[]) => unknown, thisArg?: any): number | undefined (+1 overload)
Returns the value of the first element in the array where predicate is true, and undefined
otherwise.
@param ― predicate find calls predicate once for each element of the array, in ascending
order, until it finds one where predicate returns true. If such an element is found, find
immediately returns that element value. Otherwise, find returns undefined.
@param ― thisArg If provided, it will be used as the this value for each invocation of
predicate. If it is not provided, undefined is used instead.
find((
value: number
value) => 
value: number
value > 3);

const 
const users: {
    name: string;
}[]
users = [{ 
name: string
name: "Alice" }, { 
name: string
name: "Bob" }];
const 
const user: {
    name: string;
} | undefined
user = 
const users: {
    name: string;
}[]
users.
Array<{ name: string; }>.find(predicate: (value: {
    name: string;
}, index: number, obj: {
    name: string;
}[]) => unknown, thisArg?: any): {
    name: string;
} | undefined (+1 overload)
Returns the value of the first element in the array where predicate is true, and undefined
otherwise.
@param ― predicate find calls predicate once for each element of the array, in ascending
order, until it finds one where predicate returns true. If such an element is found, find
immediately returns that element value. Otherwise, find returns undefined.
@param ― thisArg If provided, it will be used as the this value for each invocation of
predicate. If it is not provided, undefined is used instead.
find((
user: {
    name: string;
}
user) => 
user: {
    name: string;
}
user.
name: string
name === "Alice");

const 
const values: number[]
values = [1, 2, 3, 4, 5];
const 
const allPositive: number[]
allPositive = 
const values: number[]
values.
Array<number>.filter(predicate: (value: number, index: number, array: number[]) => unknown, thisArg?: any): number[] (+1 overload)
Returns the elements of an array that meet the condition specified in a callback function.
@param ― predicate A function that accepts up to three arguments. The filter method calls the predicate function one time for each element in the array.
@param ― thisArg An object to which the this keyword can refer in the predicate function. If thisArg is omitted, undefined is used as the this value.
filter((
value: number
value) => 
value: number
value > 0);

Options

This rule is not configurable.

When Not To Use It

If you intentionally use .filter(...)[0] to execute side effects in the callback on all array elements before returning the first match, you may want to disable this rule. However, this pattern is unusual and may indicate a need for code refactoring.

Equivalents in Other Linters

ESLint: @typescript-eslint/prefer-find

Made with ❤️‍🔥 around the world by the Flint team and contributors.

arrayFinds

Examples

Options

When Not To Use It

Further Reading

Equivalents in Other Linters