Разработчик рассказал, почему не стоит злоупотреблять использованием функции .map()

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

Вот что он написал.

Иногда во время код-ревью я захожу на StackOverflow и натыкаюсь на такие фрагменты кода: 

const fruitIds = ['apple', 'oragne', 'banana'];
fruitIds.map((id) => {
   document.getElementById(`fruit-${id}`).classList.add('active');
});

Это всего лишь простая итерация, в которой для каждого элемента в массиве fruItlds к определенному элементу HTML в DOM добавляется класс active. Неопытный разработчик может ничего не заменить, но в нем содержится серьезная ошибка —  в примере используется метод .map(). 

Что не так с .map()?

Говоря простыми словами отображение (мапирование) — это операция, используемая во многих языках программирования, которая применяет какую-либо функцию к каждому элементу списка своих аргументов, выдавая список результатов как возвращаемое значение. 

Например, если у нас есть массив чисел const nums = [1, 2, 3, 4] и мы хотим получить новый массив удвоенных чисел, мы можем отобразить исходный массив на новый следующим образом (пример на JavaScript): 

const biggerNums = nums.map((n) => n * 2);
// >> [2, 4, 6, 8];

Массив bigNums будет состоять из чисел из исходного массива nums, умноженных на 2. 

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

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

Правильная версия упомянутого фрагмента будет выглядеть так: 

// good way
const fruitIds = ['apple', 'oragne', 'banana'];
fruitIds.forEach((id) => {
   document.getElementById(`fruit-${id}`).classList.add('active');
});

Новый массив не нужен, поэтому просто перебирается массив fruitIds, а для каждого из элементов массива в HTML добавляется класс active. 

Может показаться, что .map() использовать проще и это не вредит, но это не так. 

Последствия злоупотребления .map()

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

В Java Script все функции возвращают значение. Даже если не использовать ключевое слово return, функция неявно вернет undefined. Это «особенность» языка и это правило также относится к обратным вызовам, потому что это тоже функции. 

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

// wrong way
const fruitIds = ['apple', 'oragne', 'banana'];
fruitIds.map((id) => {
   document.getElementById(`fruit-${id}`).classList.add('active');
});

На примере выше создается массив идентификаторов значение fruit, который затем сопоставляется с другим массивом того же размера. Несмотря на то, что массив, возвращаемый .map(), не используется, он находится в памяти. Новый неиспользуемый массив выглядит так. 

[undefined, undefined, undefined]

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

В этом примере использование .map() не принесет серьезного вреда, потому что массив содержит всего три элемента, создание еще одного ни на чем не скажется. Но проблема точно возникнет при работе с большими массивами. Например, если перебрать массив из 5000 объектов и использовать .map(), создастся еще один аналогичный массив из 5000 элементов — undefined. Итого в памяти сохранится 10 000 элементов, из которых половина — лишняя. Это нерационально, и в некоторых приложениях может привести к перегрузке приложения.

Стоит отметить, что forEach — не единственная альтернатива. Начиная с ES7 с добавлением таких методов как .entries практически во все списки, for..of может делать все, что и forEach.