Масиви є фундаментальною частиною JavaScript. Оскільки сучасні додатки постійно зростають у складності, ефективна робота з масивами стає критично важливою для розробників. Замість написання громіздких ручних циклів, сучасний JavaScript пропонує методи вищого порядку. Ці інструменти роблять код більш читабельним, виразним та функціональним.

У цій статті ми детально розглянемо чотири ключові методи масивів: map, filter, reduce та forEach. Це потужні засоби, які не лише очистять ваш код від зайвих конструкцій, але й допоможуть вам перейти до більш декларативного, функціонального стилю програмування.

1. forEach() – Ітерація по елементах

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

const numbers = [1, 2, 3, 4, 5];
numbers.forEach(num => { console.log(num * 2); });

Ключові моменти:
* Виконує наданих колег рівно один раз для кожного елемента масиву.
* Не повертає новий масив, а замість цього повертає undefined.
* Найкраще підходить для виконання побічних ефектів, наприклад, логування даних або оновлення інтерфейсу користувача (UI).

2. map() – Трансформація даних

Метод map() призначений для створення нового масиву шляхом застосування функції до кожного елемента оригінального масиву. Це ідеальний інструмент для перетворення даних.

const numbers = [1, 2, 3, 4, 5];
const squared = numbers.map(num => num * num);
console.log(squared); // [1, 4, 9, 16, 25]

Ключові моменти:
* Завжди повертає новий масив того ж розміру, що й оригінальний.
* Гарантує, що оригінальний масив залишається незмінним.
* Чудово підходить для трансформацій: конвертації значень, вилучення властивостей або реструктуризації даних.

3. filter() – Вибір підмножин

Метод filter() повертає новий масив, який містить лише ті елементи, що відповідають заданій умові. Він дозволяє відсіювати небажані дані.

const numbers = [1, 2, 3, 4, 5];
const evens = numbers.filter(num => num % 2 === 0);
console.log(evens); // [2, 4]

Ключові моменти:
* Повертає новий масив, який може бути меншим за оригінальний.
* Не змінює початковий масив.
* Колег повинен повертати true або false, щоб визначити, чи має елемент залишитися у новому масиві.

4. reduce() – Зведення до єдиного значення

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

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((acc, num) => acc + num, 0);
console.log(sum); // 15

Ключові моменти:
* Приймає акумулятор (початкове значення, наприклад, 0) та оновлює його для кожного елемента.
* Може використовуватися для обчислення сум, добутків, підрахунку елементів або побудови складних об'єктів.
* Хоча він дуже гнучкий, іноді може бути менш очевидним для читання порівняно з map чи filter.

Приклад використання reduce() для підрахунку входжень

Для більш складної задачі, як-от підрахунок частоти слів у масиві, використовується такий синтаксис:

const fruits = ["apple", "banana", "apple", "orange", "banana", "apple"];
const fruitCount = fruits.reduce((acc, fruit) => { 
    acc[fruit] = (acc[fruit] || 0) + 1; 
    return acc; 
}, {});
console.log(fruitCount); // { apple: 3, banana: 2, orange: 1 }

Комбінування методів для складних завдань

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

Наприклад, щоб отримати суму квадратів лише парних чисел із масиву:

const numbers = [1, 2, 3, 4, 5, 6]; 
const result = numbers
    .filter(num => num % 2 === 0) // Фільтруємо: [2, 4, 6]
    .map(num => num * num)       // Трансформуємо: [4, 16, 36]
    .reduce((acc, num) => acc + num, 0); // Зводимо до суми: 56

console.log(result); // 56

Цей ланцюжок є набагато чистішим та зрозумілішим, ніж реалізація того ж логіки за допомогою кількох циклів for.