find() - метод для поиска первого подходящего элемента массива в JavaScript

find() ищет первый элемент массива, который подходит под условие.

Как только подходящий элемент найден, метод сразу останавливается и возвращает его.

Синтаксис

array.find(callback)
array.find(callback, thisArg)

callback - функция, которая проверяет каждый элемент массива.

Что делает find()

Метод проходит по массиву слева направо и для каждого элемента вызывает callback.

Если callback возвращает true, этот элемент считается найденным.

const numbers = [5, 12, 8, 130];
const result = numbers.find((value) => value > 10);

console.log(result); // 12

Здесь метод вернул первый элемент больше 10.

Что возвращает find()

find() возвращает:

• первый подходящий элемент, если он найден
• undefined, если ничего не найдено

const numbers = [1, 2, 3];

console.log(numbers.find((value) => value > 2)); // 3
console.log(numbers.find((value) => value > 10)); // undefined

Это главное, что нужно запомнить про метод.

Аргументы callback

Callback в find() может получать до трёх аргументов:

array.find((element, index, array) => {
  // ...
});

• element - текущий элемент
• index - индекс текущего элемента
• array - сам исходный массив

Пример:

const fruits = ["apple", "banana", "orange"];

const result = fruits.find((fruit, index) => {
  return index === 1;
});

console.log(result); // "banana"

Поиск объекта

find() очень часто используют для поиска объекта в массиве объектов.

const users = [
  { id: 1, name: "Anna" },
  { id: 2, name: "Ivan" },
];

const user = users.find((item) => item.id === 2);

console.log(user); // { id: 2, name: "Ivan" }

Это один из самых типичных сценариев использования метода.

find() останавливается на первом совпадении

Как только найден первый подходящий элемент, дальше массив уже не проверяется.

const numbers = [2, 4, 6, 8];
const result = numbers.find((value) => value > 3);

console.log(result); // 4

Хотя 6 и 8 тоже подходят, метод возвращает только первое совпадение.

find() и filter()

Эти методы часто путают.

const numbers = [1, 2, 3, 4];

console.log(numbers.find((value) => value > 2));   // 3
console.log(numbers.filter((value) => value > 2)); // [3, 4]

find() возвращает один первый элемент.

filter() возвращает массив всех подходящих элементов.

find() и findIndex()

find() возвращает сам элемент.

findIndex() возвращает индекс найденного элемента.

const numbers = [10, 20, 30];

console.log(numbers.find((value) => value === 20));      // 20
console.log(numbers.findIndex((value) => value === 20)); // 1

find() не меняет исходный массив

Метод только ищет элемент и не изменяет массив.

const numbers = [1, 2, 3];
const result = numbers.find((value) => value === 2);

console.log(numbers); // [1, 2, 3]
console.log(result);  // 2

Пустые слоты

find() проходит и по пустым слотам массива, где значение будет undefined.

const arr = Array(3);

const result = arr.find((value) => value === undefined);

console.log(result); // undefined

Здесь легко запутаться: undefined может означать и найденное значение, и отсутствие результата.

Как отличить “не найдено” от найденного undefined

Если в массиве действительно могут быть undefined, иногда надёжнее использовать findIndex().

const arr = [undefined, 1, 2];

const index = arr.findIndex((value) => value === undefined);

console.log(index); // 0

Так проще понять, было совпадение или нет.

Когда это полезно

find() удобно использовать, когда:

• нужен только первый подходящий элемент
• нужно найти объект по условию
• не нужен массив всех совпадений

Пример:

const products = [
  { id: 1, name: "Phone" },
  { id: 2, name: "Laptop" },
];

const product = products.find((item) => item.name === "Laptop");

console.log(product); // { id: 2, name: "Laptop" }

Частые ошибки

Думать, что find() возвращает массив

const numbers = [1, 2, 3];
const result = numbers.find((value) => value > 1);

console.log(result); // 2

Это один элемент, а не [2, 3].

Путать find() и findIndex()

const numbers = [10, 20, 30];

console.log(numbers.find((value) => value === 20)); // 20

Если нужен индекс, нужен другой метод.

Забывать, что результат может быть undefined

const numbers = [1, 2, 3];

console.log(numbers.find((value) => value > 10)); // undefined

Это нормальное поведение, а не ошибка.

Быстрая памятка

• find() возвращает первый элемент, подходящий под условие
• если ничего не найдено, метод вернёт undefined
• callback может получать element, index и array
• find() останавливается на первом совпадении
• filter() возвращает массив всех совпадений, а find() - только одно

Коротко

find() - это удобный способ быстро найти первый подходящий элемент массива. Главное, что стоит запомнить: метод возвращает сам элемент, а не индекс и не массив результатов.