forEach у масиві

JavaScriptJunior~1 хв читання

Метод 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

Часті помилки та обмеження

Не повертає новий масив

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()	Так	Ні	Ні	Відфільтрувати елементи

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.