Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «reduce() у масиві». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)`reduce()` - один з найпотужніших та найуніверсальніших інструментів роботи з масивами у JavaScript. **Ключове:** він використовується для того, щоб послідовно звести (reduce) масив до одного значення: числа, рядка, об'єкта, масиву тощо.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)ЗображенняМетод `reduce()` - один з найпотужніших та найуніверсальніших інструментів роботи з масивами у JavaScript. Він використовується для того, щоб **послідовно звести (reduce)** масив **до одного значення**: числа, рядка, об'єкта, масиву тощо. ## Синтаксис ```javascript const result = array.reduce((accumulator, currentValue, index, array) => { return newAccumulatorValue; }, initialValue); ``` ### Параметри: | Аргумент | Опис | |---|---| | `accumulator` | накопичене значення (те, що повертається на кожній ітерації) | | `currentValue` | поточний елемент масиву | | `index` | індекс поточного елемента | | `array` | сам масив | | `initialValue` | початкове значення акумулятора (опційно, але **дуже бажано** задавати!) | ## Приклад 1. Сума чисел у масиві ```javascript const numbers = [1, 2, 3, 4]; const sum = numbers.reduce((acc, num) => acc + num, 0); console.log(sum); // 10 ``` Пояснення: 1. `acc = 0` (початкове значення) 2. 0 + 1 → 1 3. 1 + 2 → 3 4. 3 + 3 → 6 5. 6 + 4 → 10 ## Приклад 2. Підрахунок кількості елементів за умовою ```javascript const users = [ { name: 'Tim', age: 25 }, { name: 'Alex', age: 17 }, { name: 'John', age: 30 } ]; const adultsCount = users.reduce((acc, user) => { return user.age >= 18 ? acc + 1 : acc; }, 0); console.log(adultsCount); // 2 ``` > `reduce()` часто використовують для агрегації - підрахунків, статистики, об'єднань тощо. ## Приклад 3. Перетворення масиву на об'єкт ```javascript const fruits = ['apple', 'banana', 'cherry']; const fruitMap = fruits.reduce((acc, fruit, index) => { acc[index] = fruit; return acc; }, {}); console.log(fruitMap); // { 0: 'apple', 1: 'banana', 2: 'cherry' } ``` > Дуже зручно для перетворення даних в іншу структуру. ## Приклад 4. Об'єднання масиву об'єктів ```javascript const products = [ { price: 10 }, { price: 20 }, { price: 30 } ]; const total = products.reduce((acc, item) => acc + item.price, 0); console.log(total); // 60 ``` ## Якщо не вказати initialValue ```javascript const arr = [1, 2, 3]; const sum = arr.reduce((acc, num) => acc + num); console.log(sum); // 6 ``` Тут: - `acc` на першій ітерації = `1` (перший елемент) - `currentValue` = `2`, потім `3` > Якщо масив **порожній**, і немає `initialValue` → буде **помилка**: ```javascript [].reduce((acc, x) => acc + x); // TypeError ``` Тому **завжди вказуй початкове значення**, особливо для порожніх масивів. ## Часті помилки 1. **Відсутній** `return` ```javascript arr.reduce((acc, num) => { acc + num }, 0); // undefined ``` Виправ: ```javascript arr.reduce((acc, num) => { return acc + num }, 0); ``` 2. **Неправильний тип початкового значення** ```javascript ['1', '2', '3'].reduce((acc, n) => acc + n, 0); // '0123', рядок ``` Перетвори явно: ```javascript ['1', '2', '3'].reduce((acc, n) => acc + Number(n), 0); // 6 ``` ## Коли використовувати reduce() | Мета | Чи підходить `reduce()` | |---|---| | Сума або добуток чисел | Так | | Підрахунок статистики або кількості | Так | | Перетворення масиву на об'єкт | Так | | Конкатенація рядків або масивів | Так | | Перетворення кожного елемента | Ні - краще `map()` | | Відбір елементів | Ні - краще `filter()` | ## Коротко: > `reduce()` - "універсальний швейцарський ніж": зводить масив до **одного підсумкового значення**. Формула запам'ятовування: `arr.reduce((acc, elem) => newValue, initialValue)` ## Порівняння з іншими методами | Метод | Що робить | Повертає | Може перервати цикл | |---|---|---|---| | **forEach()** | Перебирає елементи | `undefined` | Ні | | **map()** | Перетворює елементи | Новий масив | Ні | | **filter()** | Відбирає елементи | Новий масив | Ні | | **find()** | Знаходить перший відповідний елемент | Елемент або `undefined` | Так | | **reduce()** | Зводить увесь масив до одного значення | Будь-який тип (число, рядок, об'єкт тощо) | Може через логіку |Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.