map() в JavaScript

map() - это метод для работы с массивами в JavaScript, который создает новый массив на основе элементов исходного, где каждый элемент является результатом выполнения функции.

В качестве аргумента в map() выступает функция, которая вызывается для каждого элемента массива в порядке их расположения.

Синтаксис

  
  let array = [1,2,3,4,5]
  let newArray = array.map(function(elem) {
      return elem * 2
  }) // [2,4,6,8,10]
  

Так лаконично можно умножить, все элементы массива на два.

В примере выше мы воспользовались анонимной функцией, однако в качестве аргумента может выступать и любая другая.

  
  function multiplyByTwo(elem) {
      return elem * 2
  }
  
  array.map(multiplyByTwo) // [2,4,6,8,10]
  

Стоит учитывать, что map() не меняет исходный массив, а возвращает новый.

С помощью метода map() также можно создать массив объектов.

  
  function multiplyByTwo(elem) {
      return {
          value: elem * 2
      }
  }
  
  let arrayObj = array.map(multiplyByTwo) // [{value: 2}, {value: 4}, …]
  

Функция передаваемая в map() может принимать следующие параметры:

elem Необязательный - текущий элемент обрабатываемого массива.

index Необязательный - индекс текущего элемента.

array Необязательный - перебираемый массив.

  
  function multiplyByTwo(elem, index, array) {
      return `${elem} - ${index} - ${array.length}`
  }
  
  array.map(multiplyByTwo) // ['1 - 0 - 5', '2 - 1 - 5', '3 - 2 - 5', '4 - 3 - 5', '5 - 4 - 5']
  

Передача контекста

В map() можно передать еще один параметр, который будет использоваться, как значение this внутри функции обратного вызова.

  
  let array = [1,2,3,4,5]
  let obj = {multiplier: 2}
  
  array.map(function(elem) {
      return elem * this.multiplier
  }, obj)
  

При использовании стрелочной функции, значение берется из окружающего контекста, поэтому запись будет отличаться.

  
  array.map((elem) => {
      return elem * obj.multiplier
  })
  

Если забыть вернуть значение при работе с каким-либо элементом, результатом будет undefined.

  
  let array = [1,2,3,4,5]

  let newArray = array.map((elem) => {
    if (elem < 5) {
        return elem * obj.multiplier
    }
  }) // [2,4,6,8,undefined]    
  

В примере if возвращает значения, до тех пор пока элементы меньше пяти, на последнем шаге мы видим, что результатом функции стал undefined.

Аналогичный результат

Результата похожего на работу map() можно достигнуть и с помощью метода forEach().

  
  let array = [1,2,3,4,5]
  let newArray = []
  
  array.forEach((item) => {
      newArray.push(item * 2)
  })
  

Или цикла for()

  
  for (let i = 0; i < array.length; i++) {
      newArray.push(array[i] * 2)
  }  
  

Однако если стоит задача получить новый массив, на основе другого с сохранением количества элементов предпочтительно использовать метод map() - результат более предсказуем, а запись получается более компактной и читаемой.