ForEach vs Map vs Reduce що і коли?
Зіткнувся з тим що не розумію коли застосовувати метод map а коли forEach, так само постійно зустрічаю reduce, але неясно чому обирають його а не наприклад той же map.
Коли слід використовувати map, коли reduce, а коли forEach?
У чому їх основна відмінність?
javascript масиви ecmascript-6 ecmascript map foreach reduce
Відповіді на питання (1)
Методи map, forEach, і reduce дійсно мають багато спільного, що і коли використовувати залежить від того який саме результат за підсумком потрібно отримати.
Уявімо що у нас є масив:
const locations = [
{country: "Україна", population: 2},
{country: "Китай", population: 100},
{country: "США", population: 20}
]
Якщо нам потрібно просто виконати певну дію для кожного елемента масиву, то тут підійде метод forEach :
locations.forEach(location => {
console.log(location)
// мы отримаємо такий вивід на консоль
// по одному для кожнго елемента масиву
// {country: "Україна", population: 2}
// {country: "Китай", population: 100}
// {country: "США", population: 20}
})
Або так, якщо нам потрібно лише певне значення
locations.forEach(location => {
console.log(location.country)
// Україна
// Китай
// США
})
Або так, по кількості значень в масиві
locations.forEach(() => {
console.log("Як справи?")
// Як справи?
// Як справи?
// Як справи?
})
Якщо ми хочемо трансформувати наш масив і занести результати в змінну, то тут метод map буде доречніше ніж forEach, оскільки перший за підсумком відразу поверне новий масив.
Подивимося на різницю forEach vs map в разі коли нам потрібно "обернути" кожну власну назву країни в HTML тег:
// через forEach
const result = []
locations.forEach(location => {
result.push(`<h1>${location.country}</h1>`)
})
console.log(result)
// ["<h1>Україна</h1>", "<h1>Китай</h1>", "<h1>США</h1>"]
З використанням map
const result = locations.map(location => `<h1>${location.country}</h1>`)
console.log(result)
// ["<h1>Україна</h1>", "<h1>Китай</h1>", "<h1>США</h1>"]
Метод reduce відрізняється від map тим що він повертає фінальне "значення" .
Припустимо ми хочемо порахувати сумарний розмір населення:
const result = locations.reduce((total, location) => {
return total + location.population
}, 0)
console.log(result)
// 122
Це досить простий приклад, але "фінальним значенням" може бути не тільки число, а, наприклад, об'єкт або масив, що робить метод reduce дійсно потужним інструментом трансформацій.