`.forEach()`

Время чтения: меньше 5 мин

Кратко

Метод массива forEach позволяет применить колбэк-функцию ко всем элементам массива. Можно использовать вместо классического цикла for. В отличие от него forEach выглядит более читабельным и понятным.

Пример

        
          
          const numbers = [1, 2, 3, 4]numbers.forEach((num) => {  const square = num * num  console.log("Квадрат числа равен: " + square)})
          const numbers = [1, 2, 3, 4]

numbers.forEach((num) => {
  const square = num * num
  console.log("Квадрат числа равен: " + square)
})

Выведет:

Квадрат числа равен: 1
Квадрат числа равен: 4
Квадрат числа равен: 9
Квадрат числа равен: 16

Интерактивный пример:

Открыть демо в новой вкладке

Совсем любопытные могут заглянуть в исходники, чтобы посмотреть как forEach активно используется в коде этого примера.

Как пишется

Для того чтобы использовать forEach, понадобится колбэк-функция, которую необходимо передавать в метод. Функцию можно объявить заранее:

        
          
          function sliceFruit(fruit) {  console.log("Разрезаю " + fruit + "!")}const fruits = ["🍎", "🍊", "🍋", "🍓", "🥝"]fruits.forEach(sliceFruit)
          function sliceFruit(fruit) {
  console.log("Разрезаю " + fruit + "!")
}

const fruits = ["🍎", "🍊", "🍋", "🍓", "🥝"]

fruits.forEach(sliceFruit)

Или создать её прямо в месте вызова:

        
          
          const food = ["🍔", "🍟", "🍦"]food.forEach((item) => {  console.log("Мам, купи " + item + "!")})
          const food = ["🍔", "🍟", "🍦"]

food.forEach((item) => {
  console.log("Мам, купи " + item + "!")
})

Важно знать, какие параметры принимает колбэк. Всего их три:

item — элемент массива в текущей итерации;
index — индекс текущего элемента;
arr — сам массив, который мы перебираем.

Вернёмся к примеру с едой:

        
          
          const food = ["🍔", "🍟", "🍦"]food.forEach((item, index, arr) => {  console.log("Текущий элемент " + item)  console.log("Его индекс " + index)  console.log("Исходный массив " + arr)})
          const food = ["🍔", "🍟", "🍦"]

food.forEach((item, index, arr) => {
  console.log("Текущий элемент " + item)
  console.log("Его индекс " + index)
  console.log("Исходный массив " + arr)
})

Выведет:

Текущий элемент 🍔
Его индекс 0
Исходный массив ['🍔', '🍟', '🍦']
Текущий элемент 🍟
Его индекс 1
Исходный массив ['🍔', '🍟', '🍦']
Текущий элемент 🍦
Его индекс 2
Исходный массив ['🍔', '🍟', '🍦']

Как это понять

Метод forEach можно использовать, когда вам необходимо совершить одну и ту же операцию над всеми элементами массива.

Хотя в JavaScript уже есть возможность делать это, используя цикл for, метод forEach — это отличная альтернатива с рядом преимуществ:

Использование метода forEach является декларативным способом обозначить нашу операцию. С точки зрения читабельности кода это больше приближено к естественному языку и лаконично.
Позволяет удобно получать элемент в текущей итерации, без необходимости всякий раз обращаться к массиву по индексу.

Однако вместе с тем мы получаем и несколько недостатков:

В forEach не будут работать return, break и continue, а следовательно, мы никак не можем прервать или пропустить итерацию. Потому, если для решения задачи необходимо воспользоваться каким-либо из этих операторов, придётся использовать обычный цикл for.
forEach обрабатывает элементы массива в прямом порядке, т. е. мы не можем пройти по массиву с конца.

💡 Метод forEach автоматически встроен в любой массив.

Сработает:

        
          
          const empty = []const someNums = [1, 2, 3]// Выведет функциюconsole.log(empty.forEach)// И здесь тожеconsole.log(someNums.forEach)const obj = {}// Выведет undefined, потому что у объектов нет такого методаconsole.log(obj.forEach)
          const empty = []
const someNums = [1, 2, 3]

// Выведет функцию
console.log(empty.forEach)
// И здесь тоже
console.log(someNums.forEach)

const obj = {}
// Выведет undefined, потому что у объектов нет такого метода
console.log(obj.forEach)

На практике

windrushfarer

🛠 Имена аргументов в функции-колбэке можно давать любые, главное, чтобы код было удобно читать.

🛠 Три параметра в функции-колбэке позволяют проводить дополнительные проверки. Например, последний ли это элемент массива:

        
          
          const nums = [1, 2, 3, 4, 5]nums.forEach((num, index, arr) => {  // Добавим к первому числу 9  if (index === 0) {    num = num + 9  }  // А последнее умножим на 2  else if (index === arr.length - 1) {    num = num * 2  }  console.log(num)})
          const nums = [1, 2, 3, 4, 5]

nums.forEach((num, index, arr) => {
  // Добавим к первому числу 9
  if (index === 0) {
    num = num + 9
  }
  // А последнее умножим на 2
  else if (index === arr.length - 1) {
    num = num * 2
  }
  console.log(num)
})

Выведет: