Чем отличается Array.forEach() от Array.map()?

Различия между Array.forEach() и Array.map()

В JavaScript существует множество методов для работы с массивами, и два из наиболее часто используемых — это Array.forEach() и Array.map(). Оба метода позволяют итерироваться по элементам массива, но они предназначены для разных целей и ведут себя по-разному.

Основные характеристики

1. Назначение:

   • Array.forEach(): Этот метод используется для итерирования по элементам массива и выполнения заданной функции для каждого элемента. Он не возвращает новый массив, а просто выполняет побочные эффекты, такие как вывод в консоль или изменение внешнего состояния.
   • Array.map(): Этот метод предназначен для преобразования элементов массива. Он применяет функцию к каждому элементу и возвращает новый массив, содержащий результаты вызова функции.

2. Возвращаемое значение:

   • Array.forEach(): Возвращает undefined. Он не создает новый массив, а просто выполняет операции с каждым элементом.
   • Array.map(): Возвращает новый массив, содержащий результаты вызова функции для каждого элемента исходного массива.

Синтаксис

• forEach:

  const numbers = [1, 2, 3, 4];
  numbers.forEach((number) => {
      console.log(number * 2); // Выводит 2, 4, 6, 8
  });
  

• map:

  const numbers = [1, 2, 3, 4];
  const doubled = numbers.map((number) => {
      return number * 2; // Возвращает новый массив [2, 4, 6, 8]
  });
  console.log(doubled);
  

Примеры использования

1. Пример использования forEach: Если вы хотите вывести все элементы массива в консоль, то forEach будет идеальным выбором:

   const fruits = ['apple', 'banana', 'cherry'];
   fruits.forEach((fruit) => {
       console.log(fruit); // apple, banana, cherry
   });
   

2. Пример использования map: Если вам нужно создать новый массив с преобразованными значениями, используйте map:

   const numbers = [1, 2, 3];
   const squares = numbers.map((number) => number * number); // [1, 4, 9]
   console.log(squares);
   

Ключевые отличия

• Побочные эффекты vs. Преобразование: forEach идеально подходит для выполнения действий, не изменяющих массив, в то время как map используется для создания нового массива с преобразованными данными.
• Возвращаемое значение: forEach возвращает undefined, а map возвращает новый массив.

Практические советы

• Используйте forEach, когда вам нужно просто пройти по массиву и выполнить действие.
• Используйте map, когда вам нужно преобразовать данные и получить новый массив.
• Избегайте использования forEach для получения результата, так как он не возвращает ничего полезного.

Распространенные ошибки

1. Использование forEach для получения нового массива: Некоторые разработчики могут подумать, что могут использовать forEach для создания нового массива, что неверно. Вместо этого всегда выбирайте map.

2. Игнорирование результата в map: Если не сохранять результат map, то преобразованные данные будут потеряны. Убедитесь, что вы используете результат, как показано в примерах.

Эти различия помогут вам более осознанно выбирать между forEach и map в зависимости от ваших задач, что в свою очередь сделает ваш код чище и понятнее.