map() - метод для преобразования массива в новый массив в JavaScript

map() создаёт новый массив на основе исходного.

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

Синтаксис

array.map(callback)
array.map(callback, thisArg)

callback - функция, которая будет вызвана для каждого элемента массива.

Что делает map()

map() проходит по массиву и для каждого элемента берёт результат callback.

Потом из этих результатов собирается новый массив.

const numbers = [1, 2, 3];
const result = numbers.map((value) => value * 2);

console.log(result);  // [2, 4, 6]
console.log(numbers); // [1, 2, 3]

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

Аргументы callback

Callback в map() может получать до трёх аргументов:

array.map((element, index, array) => {
  // ...
});

element - текущий элемент
index - индекс текущего элемента
array - сам исходный массив

Пример:

const words = ["a", "bb", "ccc"];

const lengths = words.map((word, index) => {
  return `${index}: ${word.length}`;
});

console.log(lengths); // ["0: 1", "1: 2", "2: 3"]

Что возвращает map()

map() всегда возвращает новый массив.

const numbers = [10, 20, 30];
const result = numbers.map((value) => value + 1);

console.log(result); // [11, 21, 31]

Даже если элементы не изменились, результат всё равно будет новым массивом.

const numbers = [1, 2, 3];
const result = numbers.map((value) => value);

console.log(result === numbers); // false

Исходный массив не меняется

Сам метод map() не изменяет исходный массив.

const fruits = ["apple", "banana"];
const upper = fruits.map((fruit) => fruit.toUpperCase());

console.log(fruits); // ["apple", "banana"]
console.log(upper);  // ["APPLE", "BANANA"]

Но если внутри callback вручную менять сам массив или объекты в нём, изменения, конечно, будут.

map() и forEach()

Эти методы часто путают, но задача у них разная.

const numbers = [1, 2, 3];
const result = numbers.map((value) => value * 2);

console.log(result); // [2, 4, 6]

map() нужен, когда нужно получить новый массив.

forEach() нужен, когда нужно просто выполнить действие для каждого элемента и результат в виде массива не нужен.

Если забыть return

Очень частая ошибка - не вернуть значение из callback.

const numbers = [1, 2, 3];
const result = numbers.map((value) => {
  value * 2;
});

console.log(result); // [undefined, undefined, undefined]

Потому что callback ничего не вернул.

Правильно так:

const result = numbers.map((value) => {
  return value * 2;
});

Или короче:

const result = numbers.map((value) => value * 2);

Пустые слоты

map() пропускает пустые слоты массива.

const arr = Array(3);
const result = arr.map((value) => 1);

console.log(result); // [ <3 empty items> ]

Callback здесь не вызывается для пустых слотов.

Это важно помнить при работе с массивами, созданными через Array(length).

Преобразование объектов

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

const users = [
  { name: "Anna" },
  { name: "Ivan" },
];

const names = users.map((user) => user.name);

console.log(names); // ["Anna", "Ivan"]

Это один из самых типичных сценариев использования метода.

Когда это полезно

map() удобно использовать, когда:

нужно преобразовать каждый элемент массива
нужен новый массив как результат
важно не менять исходные данные

Пример:

const prices = [100, 200, 300];
const withTax = prices.map((price) => price * 1.2);

console.log(withTax); // [120, 240, 360]

Частые ошибки

Думать, что map() меняет исходный массив

const numbers = [1, 2, 3];

numbers.map((value) => value * 2);

console.log(numbers); // [1, 2, 3]

Если результат не сохранить, исходный массив останется прежним.

Забывать return в callback

const numbers = [1, 2, 3];
const result = numbers.map((value) => {
  value * 2;
});

Тогда в новом массиве будут undefined.

Использовать map(), когда новый массив не нужен

numbers.map((value) => {
  console.log(value);
});

Если нужен только перебор без нового массива, обычно лучше подходит forEach().

Быстрая памятка

map() проходит по массиву и возвращает новый массив
callback может получать element, index и array
исходный массив не меняется
в callback нужно возвращать значение
map() нужен для преобразования, а forEach() - для действий без нового массива

Коротко

map() - это стандартный способ преобразовать массив в новый массив в JavaScript. Главное, что стоит запомнить: метод не меняет исходный массив, а собирает новый из значений, которые возвращает callback.