find() в JavaScript

• Синтаксис
• Как работает find()
• Поиск объекта в массиве
• Если элемент не найден
• Параметры callback-функции
• Отличие find() от filter() и some()

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

let numbers = [5, 12, 8, 20];

let result = numbers.find((number) => number > 10);

console.log(result); // 12

В этом примере подходит 12 и 20, но find() вернул только первое подходящее значение.

Синтаксис

В find() передается callback-функция. Она вызывается для элементов массива по порядку.

let result = array.find((element) => {
  return condition;
});

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

let prices = [500, 1200, 800, 3000];

let expensivePrice = prices.find((price) => {
  return price > 1000;
});

console.log(expensivePrice); // 1200

Как работает find()

find() нужен, когда из массива нужно достать один элемент по условию.

Например, найти первое короткое имя.

let names = ['Александр', 'Анна', 'Олег', 'Мария'];

let shortName = names.find((name) => name.length <= 4);

console.log(shortName); // Анна

Метод идет слева направо и останавливается на первом совпадении.

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

Чаще всего find() используют с массивами объектов. Например, чтобы найти пользователя по id.

let users = [
  { id: 1, name: 'Анна' },
  { id: 2, name: 'Олег' },
  { id: 3, name: 'Мария' },
];

let user = users.find((user) => user.id === 2);

console.log(user); // { id: 2, name: 'Олег' }

Такой код хорошо читается: найти пользователя, у которого id равен 2.

Если элемент не найден

Если подходящего элемента нет, find() вернет undefined.

let users = [
  { id: 1, name: 'Анна' },
  { id: 2, name: 'Олег' },
];

let user = users.find((user) => user.id === 10);

console.log(user); // undefined

Поэтому перед обращением к свойствам найденного объекта лучше проверить результат.

if (user) {
  console.log(user.name);
}

Параметры callback-функции

Callback-функция в find() может принимать три параметра.

element - текущий элемент массива.

index - индекс текущего элемента.

array - исходный массив.

let numbers = [10, 20, 30, 40];

let result = numbers.find((number, index) => {
  return index > 1 && number > 20;
});

console.log(result); // 30

В большинстве случаев достаточно первого параметра. Индекс нужен только если условие зависит от позиции элемента.

Отличие find() от filter() и some()

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

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

some() возвращает только true или false.

let users = [
  { id: 1, name: 'Анна', active: true },
  { id: 2, name: 'Олег', active: false },
  { id: 3, name: 'Мария', active: true },
];

let firstActiveUser = users.find((user) => user.active);
let activeUsers = users.filter((user) => user.active);
let hasActiveUser = users.some((user) => user.active);

Если нужен сам элемент - используйте find(). Если нужны все элементы - filter(). Если нужен только ответ «есть или нет» - some().