Метод map

Метод map

Технический фундамент map

map применяет функцию-преобразование к каждому элементу и всегда возвращает новый массив той же длины.

const source = [1, 2, 3];
const transformed = source.map((n) => n + 10);

console.log(transformed); // [11, 12, 13]
console.log(source); // [1, 2, 3]

Ключевой момент: map не удаляет элементы и не меняет исходный массив.

Синтаксис и базовая идея

const newArray = array.map((element, index, arr) => {
  return transformedElement;
});

Простой пример:

const nums = [1, 2, 3];
const doubled = nums.map((n) => n * 2);

console.log(doubled); // [2, 4, 6]
console.log(nums); // [1, 2, 3]

Ключевой момент: map не мутирует исходный массив.

map для массива объектов

const users = [
  { id: 1, name: 'Ann' },
  { id: 2, name: 'Max' },
];

const names = users.map((user) => user.name);
console.log(names); // ['Ann', 'Max']

Можно возвращать и новый объект.

const withLabel = users.map((user) => ({
  ...user,
  label: `${user.id}: ${user.name}`,
}));

Смотри, что важно: map создает новый массив, но элементы внутри могут остаться теми же ссылками, если ты их не копируешь.

const a = [{ id: 1 }];
const b = a.map((x) => x); // те же объекты

b[0].id = 2;
console.log(a[0].id); // 2

Что будет, если забыть return

const wrong = [1, 2, 3].map((n) => {
  n * 2;
});

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

Здесь часто ошибаются: в блоке {} нужен явный return.

const correct = [1, 2, 3].map((n) => {
  return n * 2;
});

Проверь себя: почему в короткой записи (n) => n * 2 return писать не нужно?

Микро-сценарии

  1. Подготовка данных API к карточкам.
const cards = products.map((p) => ({
  title: p.name,
  priceLabel: `${p.price} ₽`,
}));
  1. Преобразование массива строк в нижний регистр.
const normalized = tags.map((tag) => tag.toLowerCase());

Типичные ошибки

  • Путать map и forEach.
  • Забывать return в callback.
  • Мутировать объекты внутри map, когда нужен чистый подход.
  • Использовать map, когда фильтрация важнее преобразования.

Краткий итог

  • map возвращает новый массив той же длины.
  • Каждый элемент преобразуется callback-функцией.
  • Исходный массив остается неизменным.
  • Частые задачи: форматирование данных, создание UI-моделей.
  • Для удаления элементов нужен filter, для агрегации — reduce.