Что такое Map в JavaScript

Map это встроенная структура данных для хранения пар ключ-значение. Она похожа на словарь, но с явным API коллекции: вы не обращаетесь к полям через точку, а используете методы set, get, has и delete.

const usersById = new Map();

usersById.set(42, { name: "Alice" });
usersById.set(7, { name: "Bob" });

console.log(usersById.get(42)); // { name: "Alice" }
console.log(usersById.has(7)); // true
console.log(usersById.size); // 2

Хороший короткий ответ на интервью: Map нужен, когда вы работаете именно с коллекцией пар, а не с объектом фиксированной формы. Он лучше выражает операции добавления, удаления, проверки наличия и обхода элементов.

Главное отличие в ключах. У обычного объекта имена свойств это строки или символы. Если использовать объект как ключ обычного объекта, он будет приведен к строке, что легко приводит к коллизиям. В Map объект остается настоящим ключом.

const node = document.createElement("button");
const metadata = new Map();

metadata.set(node, { tracked: true });

console.log(metadata.get(node)); // { tracked: true }

Для живых DOM-узлов такой пример требует осторожности. Обычный Map удерживает ключи сильной ссылкой. Если узел удалили из интерфейса, а запись осталась в долгоживущей коллекции, память может не освободиться. Для временных метаданных чаще выбирают WeakMap или удаляют запись в cleanup.

Но здесь есть еще одна важная граница. Объекты сравниваются по ссылке, а не по содержимому.

const cache = new Map();

cache.set({ id: 1 }, "loaded");

console.log(cache.get({ id: 1 })); // undefined

Это не баг Map. Это правило идентичности объектов в JavaScript. Если вам нужен ключ по данным, используйте стабильный примитивный ключ, например id или заранее нормализованную строку.

Для ответа на интервью полезно не спорить, что Map всегда лучше объекта. Лучше показать критерий выбора.

Если у вас модель пользователя, настройки компонента или DTO от API, обычный объект читается проще и легче типизируется. Если у вас динамический индекс, кеш, таблица соответствий или коллекция с частыми удалениями, Map обычно яснее по смыслу.

WeakMap стоит упомянуть как сильный плюс, но не как замену Map. Он нужен для объектных ключей, которые не должны удерживаться в памяти коллекцией. Это помогает для временных метаданных DOM-узлов и объектов, живущих вместе с компонентом. Цена за это: нельзя пройтись по всем элементам и нельзя узнать размер.

Первая ловушка: проверка через get. Если значение может быть undefined, такой код ошибается.

// Плохо: undefined может быть сохраненным значением.
if (cache.get(key) === undefined) {
  await loadAgain();
}

// Лучше: отдельно проверяем наличие ключа.
if (!cache.has(key)) {
  await loadAgain();
}

Последствие простое: фронтенд может делать лишние запросы, сбрасывать состояние или показывать пользователю загрузку там, где данные уже были обработаны.

Вторая ловушка: мутация Map в React state. Методы set, delete и clear меняют текущий экземпляр. Если вернуть ту же ссылку в state, React может не запустить ожидаемый ререндер.

// Плохо: мутируем тот же Map.
setSelected((prev) => {
  prev.set(id, true);
  return prev;
});

// Лучше: создаем новый экземпляр.
setSelected((prev) => {
  const next = new Map(prev);
  next.set(id, true);
  return next;
});

На интервью достаточно сказать: Map можно хранить в состоянии, но обновлять его надо иммутабельно, как и другие изменяемые структуры.

Map итерируется в порядке вставки. Это удобно, когда порядок добавления имеет смысл для UI: например, список выбранных фильтров, очередь уведомлений или порядок последних просмотренных элементов.

const filters = new Map();

filters.set("color", "red");
filters.set("size", "m");

for (const [name, value] of filters) {
  console.log(name, value);
}

Важно не обещать лишнего. Map не сортирует ключи сам. Если нужен алфавитный порядок, приоритет или сортировка по дате, сортируйте данные явно перед рендером.

Map удобен внутри приложения, но не является обычным JSON-объектом. Если вы отправляете данные на backend, кладете их в localStorage или передаете через SSR-данные, выберите явный формат.

const map = new Map([
  ["theme", "dark"],
  ["density", "compact"],
]);

const asArray = JSON.stringify(Array.from(map));
const asObject = JSON.stringify(Object.fromEntries(map));

Массив пар сохраняет структуру Map лучше, особенно если порядок важен. Объект удобен, если ключи точно строки и контракт API ожидает обычный объект. Если ключи были объектами, простое преобразование в объект потеряет исходную идентичность.

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

Map это коллекция пар ключ-значение с явными методами для чтения, записи, удаления и проверки наличия. В отличие от объекта, Map позволяет использовать ключи любого типа и удобно итерируется в порядке вставки. Я использую его для динамических коллекций, кешей и индексов, но помню, что объектные ключи сравниваются по ссылке, get не заменяет has, а для JSON и React state нужны дополнительные аккуратные шаги.

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