Что такое функция map

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

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

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

В коротком ответе важно сказать не только, что метод перебирает массив. Добавьте, что он возвращает новый массив. Иначе ответ звучит как описание forEach.

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

Callback получает значение, индекс и сам массив:

const labels = ["html", "css", "js"].map((item, index) => {
  return `${index + 1}. ${item.toUpperCase()}`;
});

// ["1. HTML", "2. CSS", "3. JS"]

Если вы хотите убрать часть элементов, это уже не задача map. Используйте filter. Если хотите получить одно значение, например сумму, подумайте про reduce или обычный цикл.

На интервью хорошо звучит, когда вы объясняете выбор метода через намерение. map читается как преобразование данных. Если в коде нет нового массива, намерение становится ложным.

Плохой пример:

users.map((user) => {
  sendAnalytics(user.id);
});

Здесь результат map не используется. Если такой код попадет в render или в effect с неверными зависимостями, он может отправлять лишние события аналитики при каждом обновлении UI. Лучше написать forEach внутри явного обработчика или вынести отправку аналитики в отдельную функцию, чтобы следующий разработчик не искал несуществующую трансформацию.

Фраза про то, что map не меняет исходный массив, верная, но неполная. Метод создает новый массив, но элементы могут оставаться теми же ссылками. Если элемент - объект, его можно случайно изменить внутри callback.

Плохой пример:

const updated = users.map((user) => {
  if (user.id === activeId) {
    user.isActive = true;
  }

  return user;
});

Такой код мутирует старый объект. Безопаснее вернуть новый объект только для измененного элемента:

const updated = users.map((user) => {
  if (user.id !== activeId) {
    return user;
  }

  return { ...user, isActive: true };
});

Для frontend это не академическая деталь. Мутация состояния может сломать мемоизацию, оставить в UI старые данные, усложнить откат optimistic UI и сделать баги зависимыми от порядка рендеров.

Во frontend-разработке map часто встречается при рендере списков.

function UserList({ users }) {
  return (
    <ul>
      {users.map((user) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

Здесь важно упомянуть key. React использует его, чтобы сопоставлять элементы между рендерами. Если взять индекс как key в списке, который сортируется или меняется, фокус, введенный текст или локальное состояние дочерних компонентов может оказаться у другого элемента.

map не становится асинхронным из-за async callback. Он сразу вернет массив промисов.

const promises = ids.map(async (id) => {
  const response = await fetch(`/api/users/${id}`);
  return response.json();
});

const users = await Promise.all(promises);

Это нормальный подход для параллельных независимых запросов. Но если запросов много, стоит подумать про лимит параллельности, отмену через AbortController, обработку ошибок и состояние загрузки. Иначе можно перегрузить API, получить race condition при смене параметров или оставить UI в непонятном состоянии после первой ошибки.

Сильный ответ можно сформулировать так:

map - это метод массива для преобразования данных. Он вызывает callback на каждом элементе и возвращает новый массив результатов такой же длины. Сам массив он не меняет, но объекты внутри можно случайно мутировать по ссылке. Если мне нужен просто side effect, я выберу forEach или цикл. Если callback async, буду ждать массив промисов через Promise.all или другой подход.

Такая формулировка закрывает определение, отличие от похожих методов и практические риски, которые часто всплывают во frontend-коде.