Вирішено ForEach vs Map vs Reduce що і коли?

Alex Alex · 12 · 1

Зіткнувся з тим що не розумію коли застосовувати метод map а коли forEach, так само постійно зустрічаю reduce, але неясно чому обирають його а не наприклад той же map.

Коли слід використовувати map, коли reduce, а коли forEach?

У чому їх основна відмінність?

Відповіді на питання

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


Для відповіді на запитання необхідно авторизуватись

Війти / Зареєструватися