LearnJS

Array callback methods в JavaScript

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

let numbers = [1, 2, 3];

numbers.forEach(function (number) {
  console.log(number);
});

Функция внутри forEach() - это callback. Метод сам вызывает ее для каждого элемента массива.

Что такое array callback methods

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

Например, что сделать с каждым элементом, какой элемент оставить, какой элемент найти или как собрать итоговое значение.

К таким методам относятся:

  • forEach() - перебрать элементы;
  • map() - создать новый массив;
  • filter() - отфильтровать элементы;
  • find() - найти первый подходящий элемент;
  • some() - проверить, есть ли хотя бы один подходящий элемент;
  • every() - проверить, подходят ли все элементы;
  • reduce() - собрать одно значение из массива.

Общий синтаксис

У большинства таких методов похожий принцип записи.

array.method(function (element, index, array) {
  // действие с элементом
});

Вместо обычной функции часто используют стрелочную.

array.method((element, index, array) => {
  // действие с элементом
});

Названия параметров можно менять. Главное - их порядок.

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

Callback-функция в методах массива обычно может получать три значения:

let users = ['Анна', 'Игорь', 'Мария'];

users.forEach(function (user, index, array) {
  console.log(user);
  console.log(index);
  console.log(array);
});

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

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

array - сам массив, по которому идет перебор.

Чаще всего нужен только первый параметр.

users.forEach((user) => {
  console.log(user);
});

forEach()

forEach() выполняет callback для каждого элемента массива.

let fruits = ['яблоко', 'банан', 'груша'];

fruits.forEach((fruit) => {
  console.log(fruit);
});

Этот метод удобен, когда нужно что-то сделать с каждым элементом: вывести в консоль, создать разметку, вызвать функцию.

forEach() не создает новый массив.

map()

map() создает новый массив на основе старого.

let prices = [100, 200, 300];

let pricesWithTax = prices.map((price) => {
  return price * 1.2;
});

console.log(pricesWithTax);

Результат:

[120, 240, 360]

Количество элементов в новом массиве будет таким же, как в исходном.

filter()

filter() создает новый массив только из тех элементов, для которых callback вернул true.

let ages = [14, 22, 17, 30];

let adults = ages.filter((age) => {
  return age >= 18;
});

console.log(adults);

Результат:

[22, 30]

find()

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

let users = [
  { name: 'Анна', role: 'user' },
  { name: 'Игорь', role: 'admin' },
  { name: 'Мария', role: 'user' }
];

let admin = users.find((user) => {
  return user.role === 'admin';
});

console.log(admin);

Результат:

{ name: 'Игорь', role: 'admin' }

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

some() и every()

some() проверяет, есть ли в массиве хотя бы один подходящий элемент.

let ages = [14, 16, 21];

let hasAdult = ages.some((age) => {
  return age >= 18;
});

console.log(hasAdult);

Результат:

true

every() проверяет, подходят ли все элементы массива.

let scores = [80, 90, 75];

let allPassed = scores.every((score) => {
  return score >= 60;
});

console.log(allPassed);

Результат:

true

reduce()

reduce() помогает получить одно итоговое значение из массива.

let numbers = [10, 20, 30];

let sum = numbers.reduce((result, number) => {
  return result + number;
}, 0);

console.log(sum);

Результат:

60

result - накопленное значение. number - текущий элемент массива.

return в callback

Для разных методов значение return используется по-разному.

В map() то, что вернул callback, попадет в новый массив.

let numbers = [1, 2, 3];

let doubled = numbers.map((number) => {
  return number * 2;
});

В filter(), find(), some() и every() callback должен вернуть условие.

let adults = ages.filter((age) => {
  return age >= 18;
});

А у forEach() результат callback-функции не используется.

let result = numbers.forEach((number) => {
  return number * 2;
});

console.log(result);

Результат:

undefined

Если нужен новый массив, используйте map(), а не forEach().

Итого

1. Array callback methods принимают функцию и вызывают ее для элементов массива.

2. Callback обычно получает элемент, индекс и сам массив.

3. forEach() нужен для перебора, map() - для создания нового массива, filter() - для отбора элементов.

4. find() возвращает первый подходящий элемент, some() и every() возвращают true или false.

5. reduce() собирает одно итоговое значение из массива.