Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «forEach у масиві». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**Метод `forEach()`** у JavaScript використовується для перебору елементів масиву та виконання дії над кожним елементом. На відміну від `map()` і `filter()`, він нічого не повертає - використовується тільки для побічних ефектів (лог, запит, зміна даних тощо). **Ключове:** `forEach()` виконує дію для кожного елемента, нічого не повертаючи.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)ЗображенняМетод `forEach()` в JavaScript використовується для **перебору елементів масиву** і **виконання дії** над кожним елементом. На відміну від `map()` і `filter()`, він **нічого не повертає** - використовується **тільки для побічних ефектів** (лог, запит, зміна даних тощо). --- ## Синтаксис ```javascript array.forEach((element, index, array) => { // дія над елементом }); ``` ### Параметри колбеку: | Аргумент | Опис | |---|---| | `element` | Поточний елемент масиву | | `index` | Індекс поточного елемента | | `array` | Сам вихідний масив | --- ## Приклад 1. Виведення елементів у консоль ```javascript const numbers = [1, 2, 3]; numbers.forEach(num => { console.log(num); }); // Виведе: // 1 // 2 // 3 ``` > Метод просто **проходить по кожному елементу**, нічого не повертаючи. --- ## Приклад 2. Модифікація зовнішніх даних ```javascript const users = ['Tim', 'Alex', 'John']; const greetings = []; users.forEach(name => { greetings.push(`Hello, ${name}!`); }); console.log(greetings); // ['Hello, Tim!', 'Hello, Alex!', 'Hello, John!'] ``` > Тут `forEach` використовується для **заповнення нового масиву вручну** (на відміну від `map`, який робить це автоматично). --- ## Приклад 3. Робота з індексами ```javascript const fruits = ['apple', 'banana', 'cherry']; fruits.forEach((fruit, index) => { console.log(`${index + 1}. ${fruit}`); }); // 1. apple // 2. banana // 3. cherry ``` --- ## Часті помилки та обмеження 1. **Не повертає новий масив** ```javascript const result = [1, 2, 3].forEach(n => n * 2); console.log(result); // undefined ``` Використовуй `map()`, якщо потрібно отримати новий масив. 2. **Не можна перервати цикл (**`break` **або** `return`**)** ```javascript [1, 2, 3].forEach(num => { if (num === 2) return; // не зупинить цикл console.log(num); }); // Виведе: 1, 3 ``` Якщо потрібно перервати цикл - використовуй звичайний `for` або `for...of`. 3. **Не працює з** `async/await` **очікувано** ```javascript await array.forEach(async item => { await fetch(item); // не дочекається всіх запитів }); ``` Для асинхронних операцій краще: ```javascript for (const item of array) { await fetch(item); } ``` --- ## Коли використовувати `forEach()` | Мета | Чи підходить `forEach()` | |---|---| | Виконати дію для кожного елемента | Так | | Перетворити масив | Ні - використовуй `map()` | | Відфільтрувати елементи | Ні - використовуй `filter()` | | Знайти елемент | Ні - використовуй `find()` | | Перервати виконання | Ні - використовуй `for` | --- ## Коротко: > `forEach()` - виконує дію для кожного елемента, **нічого не повертаючи**. Формула запам'ятовування: `arr.forEach(дія)` -> `нічого не повертає`. --- ## Порівняння з `map()` і `filter()` | Метод | Повертає новий масив | Змінює вихідний | Можна перервати | Основне призначення | |---|---|---|---|---| | **forEach()** | Ні | Ні | Ні | Просто пройтися | | **map()** | Так | Ні | Ні | Перетворити дані | | **filter()** | Так | Ні | Ні | Відфільтрувати елементи |Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.