Преобразование элементов: map()

Другой знакомый вам цикл проходит по массиву и делает из каждого элемента что-то новое. Этот собирает массив имён животных зоопарка из предыдущего упражнения:

const names = [];
for (const animal of animals) {
    names.push(animal.name);
}
console.log(names);

["Бим", "Лео", "Гоша", "Пип"]

Для этого и нужен метод map():

const names = animals.map((animal) => animal.name);
console.log(names);

["Бим", "Лео", "Гоша", "Пип"]

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

const ages = animals.map((animal) => animal.age);
const agesNextYear = ages.map((age) => age + 1);
const labels = animals.map((animal) => `${animal.species} ${animal.name}`);

console.log(agesNextYear);
console.log(labels);

[13, 7, 5, 3]
["слон Бим", "лев Лео", "жираф Гоша", "пингвин Пип"]

Как и filter(), map() не изменяет исходный массив: в ages по-прежнему [12, 6, 4, 2].

Во многих программах вы также увидите метод forEach(). Он тоже вызывает колбэк для каждого элемента, но не создаёт новый массив. Это ещё один способ записать цикл for...of:

animals.forEach((animal) => console.log(animal.name));

Бим
Лео
Гоша
Пип

Это то же самое, что for (const animal of animals) { console.log(animal.name); }, так что пользуйтесь тем, что вам больше нравится. Когда нужен новый массив, используйте map().

Типичная ошибка — колбэк с фигурными скобками, но без return. animals.map((animal) => { animal.name; }) даёт [undefined, undefined, undefined, undefined], потому что колбэк ни для одного животного ничего не возвращает.