Map. What's special about it? What properties and methods does it have? How to iterate?

👨‍💻 Frontend Developer 🟡 Often Asked 🎚️ Hard
#JavaScript #Collections #JS Basics

Brief Answer

Map is a key-value collection, like a regular object, but with important differences:

  • Keys can be of any type (not just strings)
  • Addition order is preserved
  • Has [size] property to get element count
  • Convenient methods: [set()], [get()], [has()], [delete()], [clear()]
const map = new Map();
map.set('key', 'value');
map.set(1, 'number as key');
map.set(true, 'boolean as key');
 
console.log(map.get('key')); // 'value'
console.log(map.size); // 3

Full Answer

Map is like a special organizer with compartments, where you can store anything in each compartment and label the compartments with any labels! Unlike a regular box (object), this organizer is smart and remembers what you put in it and in what order! 🗂️

Map Features

Main differences between Map and regular objects:

Simple Examples

Creation and Basic Methods

// Creating Map
const userMap = new Map();
 
// Adding elements
userMap.set('name', 'John');
userMap.set('age', 25);
userMap.set(1, 'first');
 
// Getting values
console.log(userMap.get('name'));    // 'John'
console.log(userMap.get(1));        // 'first'
 
// Checking existence
console.log(userMap.has('name'));    // true
console.log(userMap.has('city'));    // false
 
// Deletion
userMap.delete('age');
console.log(userMap.size); // 2

Keys of Any Type

const map = new Map();
const funcKey = function() {};
const objKey = {};
const arrKey = [];
 
map.set(funcKey, 'function as key');
map.set(objKey, 'object as key');
map.set(arrKey, 'array as key');
map.set(NaN, 'NaN works too');
 
console.log(map.get(funcKey)); // 'function as key'

Map Properties and Methods

Basic Properties

const map = new Map([
  ['a', 1],
  ['b', 2],
  ['c', 3]
]);
 
console.log(map.size); // 3 (number of elements)

Basic Methods

const map = new Map();
 
// set(key, value) — adds key-value pair
map.set('key', 'value');
 
// get(key) — gets value by key
const value = map.get('key');
 
// has(key) — checks key existence
const exists = map.has('key');
 
// delete(key) — removes element by key
map.delete('key');
 
// clear() — clears entire Map
map.clear();

How to Iterate Map

Using for…of

const map = new Map([
  ['name', 'John'],
  ['age', 25],
  ['city', 'Moscow']
]);
 
// Iterating [key, value] pairs
for (const [key, value] of map) {
  console.log(key, value);
}
 
// Iterating keys only
for (const key of map.keys()) {
  console.log(key);
}
 
// Iterating values only
for (const value of map.values()) {
  console.log(value);
}

Using forEach

const map = new Map([
  ['a', 1],
  ['b', 2],
  ['c', 3]
]);
 
map.forEach((value, key) => {
  console.log(key, value);
});

When to Use Map

When Non-String Keys Are Needed

// Objects as keys — only in Map!
const user1 = { id: 1, name: 'John' };
const user2 = { id: 2, name: 'Peter' };
 
const userRoles = new Map();
userRoles.set(user1, 'admin');
userRoles.set(user2, 'user');

When Addition Order Matters

// Map preserves addition order
const ordered = new Map();
ordered.set('third', 3);
ordered.set('first', 1);
ordered.set('second', 2);
 
for (const [key, value] of ordered) {
  console.log(key, value); 
  // Output in addition order, not alphabetical!
}

Common Mistakes

Confusion with Objects

// ❌ Error — trying to use object as key in object
const obj = {};
const key = {};
// obj[key] = 'value'; // key becomes '[object Object]'
 
// ✅ Correctly — use Map for any keys
const map = new Map();
map.set(key, 'value'); // works as expected

Forgetting new When Creating

// ❌ Error — forgot new
// const map = Map(); // TypeError!
 
// ✅ Correctly
const map = new Map();

Simple Rules

  1. Any keys — keys can be any values 🗝️
  2. Order — addition order is preserved 📋
  3. size — property to get element count 📏
  4. Methods — set(), get(), has(), delete(), clear() 🛠️
  5. Iteration — can iterate with for…of and forEach 🔄

Map is a powerful alternative to regular objects when special collection capabilities are needed! 💪


Want more articles to prepare for interviews? Subscribe to EasyAdvice, bookmark the site and improve yourself every day 💪