JavaScript  —  Map проти ForEach

4 хв. читання

Якщо ви працювали з JavaScript, то, напевно, стикалися з двома подібними методами масивів: Array.prototype.map() та Array.prototype.forEach().

То в чому між ними різниця?

Визначення Map і ForEach

Погляньмо спершу на їх визначення на MDN:

  • forEach() — виконує надану функцію один раз для кожного елемента масиву.
  • map() — створює новий масив з результатами виклику наданої функції для кожного елемента у масиві, що викликається.

Що саме це означає?

Метод forEach(), фактично, нічого не повертає (undefined). Він просто викликає надану функцію для кожного елемента у масиві. Цей зворотний виклик дозволяє змінювати викликаний масив.

Метод map() теж викличе надану функцію для кожного елемента масиву. Відмінність полягає в тому, що map() використовує значення, які повертаються, і повертає новий масив того самого розміру.

Приклади коду

Розгляньте нижче наведений масив. Якби ми хотіли подвоїти кожний елемент у масиві, ми могли б використати або map або forEach.

let arr = [1, 2, 3, 4, 5];

ForEach:
Зверніть увагу на те, що ви ніколи не зможете викликати return із функції forEach, оскільки значення return відкидаються:

arr.forEach((num, index) => {
    return arr[index] = num * 2;
});

Результат:

// arr = [2, 4, 6, 8, 10]

Map:

let doubled = arr.map(num => {
    return num * 2;
});

Результат:

// doubled = [2, 4, 6, 8, 10]

Розгляд швидкості

jsPerf хороший сайт для тестування швидкості різноманітних методів та функцій JavaScript.

Ось результати порівняння швидкості forEach() і map():

JavaScript  —  Map проти ForEach

Як ви бачите, у цьому випадку forEach() виявився на 70% повільнішим за map(). Результати для різних ОС та браузерів можуть відрізнятися. Можете переглянути всі результати тесту тут.

Функціональні міркування

Важливо також розуміти, що використання map() може бути кращим, якщо ви віддаєте перевагу функціональному програмуванню.

Це через те, що forEach() впливає на оригінальний масив і змінює його, тоді як map() повертає зовсім новий масив, залишаючи вихідний масив незмінним.

Що краще?

Це залежить від того, що ви намагаєтесь зробити.

forEach() може бути кращим, якщо ви не змінюєте дані у вашому масиві, але натомість хочете щось із ним зробити — наприклад, зберегти його в базі даних або вивести:

let arr = ['a', 'b', 'c', 'd'];
arr.forEach((letter) => {
    console.log(letter);
});
// a
// b
// c
// d

map() краще використовувати при зміні чи маскуванні даних. Не тільки тому, що він швидше, а ще й через те, що він повертає новий масив. Це означає, що ми можемо робити різні круті речі, такі як прив'язка до інших методів (map(), filter(), reduce() тощо).

let arr = [1, 2, 3, 4, 5];
let arr2 = arr.map(num => num * 2).filter(num => num > 5);
// arr2 = [6, 8, 10]

У вищенаведеному прикладі ми спершу перебираємо масив arr та помножуємо кожний його елемент на 2. Після цього ми фільтруємо масив та зберігаємо тільки ті елементи, що більші за 5. Це дає нам кінцевий arr2 з [6,8,10].

Ключові виноски

  • Майже все, що ви можете робити з forEach(), ви можете зробити й з map(), і навпаки.
  • map() виділяє пам'ять та зберігає значення return. forEach() викидає значення return й завжди повертає undefined.
  • forEach() дозволить функції зворотного виклику змінити поточний масив. map() замість цього поверне новий масив.
Помітили помилку? Повідомте автору, для цього достатньо виділити текст з помилкою та натиснути Ctrl+Enter
Codeguida 6.2K
Приєднався: 7 місяців тому
Коментарі (0)

    Ще немає коментарів

Щоб залишити коментар необхідно авторизуватися.

Вхід / Реєстрація