ForEach vs Map vs Reduce що і коли?

Методи 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 дійсно потужним інструментом трансформацій.

Alex · 3 роки тому
Коментарі (0)

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

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

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