Ітеровані об'єкти в JavaScript

Коли нам потрібно перебрати об'єкт ми зазвичай потрапляємо в пастку, використовуючи завжди одні й ті самі ітератори, наприклад for або .map(). Але в JS існує велика кількість ітераторів, кожен я яких має свою специфіку і відрізняється від інших.

В цій статті я поясню на практиці різницю між .map(), .filter(), .find(), .reduce() та .forEach()

1. Почнемо з .map()

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

const array = ["name1", "name2", "name3"];

// передача функції методу map
const map = array.map((x, i) => {
  return x.concat(` surname${i+1}`);
});

console.log(map);
// Очікуваний результат: Array ["name1 surname1", "name2 surname2", "name3 surname3"]

Як ви можете побачити ітератор .map() створює новий масив, наповнений результатом роботи переданої функції.

2. .filter()

Ітератор filter() обійде весь масив і поверне новий, напонений елементами які відповідають умовам в переданій функції

const array = ["name1", "name2", "name3"];

// передаємо функцію в фільтр
const filter = array.filter(x => !x.includes(2));

console.log(map);
// очікуваний результат: Array ["name1", "name3"]

3. .find()

Метод find() поверне перший знайдений елемент який відповідає вказаним умовам

const array = ["name1", "name2", "name3"];

// передаємо функцію з умовою для пошуку
const find = array.find(x => x.includes(2));

console.log(map);
// очікуваний результат: Array "name2"

4. .reduce()

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

Функція редуктор приймає наступні аргументи:

1. Акумулятор (змінна в якій буде накопичуватися результат)
2. Поточне значення
3. Поточний індекс
4. Масив з джерелом даних

const reducer = (sum, val) => sum + val;
const initialValue = 0;
const arr = [1, 3, 5, 7];

const sumReduce = arr.reduce(reducer, initialValue);
console.log(sumReduce);
// очікуваний результат: 16

5. .forEach()

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

const arr = ['a', 'b', 'c'];

arr.forEach(element => console.log(element));

// очікуваний результат: "a"
// очікуваний результат: "b"
// очікуваний результат: "c"

.forEach() являється загальним інстументом в JavaScript і цей метод необхідно використовувати якщо немає кращих і методів для вирішення вашої задачі.

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

Джерело: JS Iterator objects