JavaScript: Святая “массивная” троица: Map, Filter, Reduce

Частичный перевод статьи “Map, Filter, Reduce: The Holy Trinity of Array Methods” с сайта medium.com

Три немутирующих метода массива, которые необходимо знать в наши дни.

Map

map метод создает новый массив, содержащий результат вызова функции переданной в первым параметром, которая применяется к каждому элементу массива:

const items = [1,2,3,4]; 
const doubled = items.map(x => x * 2);
console.log(doubled) // [2,4,6,8]

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

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

Filter

Метод filter создает новый массив со всеми элементами массива, которые проходят проверку реализованную в функции callback. Разница с map в то, что размер результирующего массива может быть равной или меньшей размера исходного массива.

const items = [1,2,3,4];
const justEven = items.filter(x => x%2 === 0);
console.log(justEven)
// [2,4]

Есть несколько важных моментов, на которые стоит обратить внимание при использовании метода filter. Первое это то, что он никак не изменяет исходные значения элементов массива, а просто добавляет их в новый если они проходят проверку. Второе – функция callback должна вернуть true или false. Если венуть что-либо другое – значение будет приведено к типу Boolean.

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

Reduce

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

const items = [1,2,3,4];
const sumOfItems =
  items.reduce((acc,cur) => acc + cur);
console.log(sumOfItems)
// 10

Этот метод принимает второй необязательный параметр. Если передать его, то значение будет использовано как начальное значение для аккумулятора. Если его не передавать, то вместо него будет использовано значение с индексом 0 из массива и функция callback не будет применяться к этому элементу. Не смотря на то, что этот параметр опциональный, он рекомендуется к использованию.