Introduction

const nameToAge = new Map();
nameToAge.set('john', 25); // Map { 'john' => 25 }
nameToAge.set('jane', 28); // Map { 'john' => 25, 'jane' => 28 }
nameToAge.set('john', 26); // Map { 'john' => 26, 'jane' => 28 }
nameToAge.get('john'); // 26
nameToAge.get('jill'); // undefined

const countryToCapital = new Map([
  ['France', 'Paris'],
  ['Italy', 'Rome'],
  ['Australia', 'Canberra'],
]);
// Map { 'France' => 'Paris', 'Italy' => 'Rome', 'Australia' => 'Canberra' }

console.log(nameToAge instanceof Map); // true
console.log(countryToCapital instanceof Map); // true

Iterables

const prices = new Map([
  ['cucumber', 50],
  ['tomatoes', 35],
]);

for (const entry of prices.entries()) {
  console.log(entry); // ['cucumber', '50'], ['tomatoes', '35']
}
for (const entry of prices) {
  console.log(entry); // ['cucumber', '50'], ['tomatoes', '35']
}
console.log([...prices]); // [['cucumber', '50'], ['tomatoes', '35']]
console.log([...prices.keys()]); // ['cucumber', 'tomatoes']
console.log([...prices.values()]); // [50, 35]

const pricesCopy = new Map(prices);
console.log(pricesCopy); // Map { 'cucumber' => '50', 'tomatoes' => '35' }

Map Keys

const objAsMap = Object.create(null);
objAsMap['hi'] = 'hi';
objAsMap[Symbol('french')] = 'bonjour';
objAsMap[123] = 'salam';
objAsMap['123'] = 'hola';
objAsMap[{ name: 'John' }] = 'konnichiwa';
objAsMap[{ name: 'Jane' }] = 'namaste';
console.log(objAsMap);
// { 
//   'hi': 'hi', 
//   [Symbol(french)]: 'bonjour',
//   '123': 'hola',
//   '[object Object]': 'namaste' 
// }

const map = new Map();
map.set('hi', 'hi');
map.set(Symbol('french'), 'bonjour');
map.set(123, 'salam');
map.set('123', 'hola');
map.set({ name: 'John' }, 'konnichiwa');
map.set({ name: 'Jane' }, 'namaste');
console.log(map);
// Map {
//   'hi' => 'hi',
//   Symbol(french) => 'bonjour',
//   123 => 'salam',
//   '123' => 'hola',
//   { name: 'John' } => 'konnichiwa',
//   { name: 'Jane' } => 'namaste'
// }

Insertion Order is Preserved

const orders = [
  ['John', 'Burger'],
  ['Jane', 'Steak'],
  ['John', 'Salad'],
];

const ordersGrouped = new Map();
for (const [name, item] of orders) {
  if (ordersGrouped.has(name)) { ordersGrouped.get(name).push(item); }
  else { ordersGrouped.set(name, [item]); }
}
console.log([...ordersGrouped]);
// [
//  ['John', ['Burger', 'Salad']],
//  ['Jane', ['Steak']]
// ]

Methods and Properties

const balance = new Map();

balance
  .set('John', 10)
  .set('Jane', 18);

console.log(balance.get('John')); // 10
console.log(balance.get('Jill')); // undefined

balance.delete('John'); // true
balance.delete('Jill'); // false

balance.has('Jane'); // true
balance.has('Jill'); // false

console.log(balance); // Map { 'Jane' => 18 }
console.log(balance.size); // 1

balance.clear();
console.log(balance); // Map {}

Map to Object to Map

const countryToFlag = new Map([
  ['United States', '🇺🇸'],
  ['France', '🇫🇷'],
  ['Australia', '🇦🇺'],
]);

const obj = Object.fromEntries(countryToFlag);
console.log(obj);
// { United States: '🇺🇸', France: '🇫🇷', Australia: '🇦🇺' }

const map = new Map(Object.entries(obj));
console.log(map);
// Map(4) { 'United States' => '🇺🇸', 'France' => '🇫🇷', 'Australia' => '🇦🇺' }

Map Uses Strict Equality

const obj1 = { name: 'Alice' };
const obj2 = { name: 'Alice' };

console.log(obj1 === obj2); // false
console.log(obj1 === obj1); // true
console.log(obj2 === obj2); // true

const ageMap = new Map();
ageMap.set({ name: 'Alice' }, 20);
ageMap.set({ name: 'Alice' }, 21);

console.log(ageMap);
// Map { { name: 'Alice' } => 20, { name: 'Alice' } => 21 }

ageMap.clear();

const alice = { name: 'Alice' };
ageMap.set(alice, 20);
ageMap.set(alice, 21);

console.log(ageMap);
// Map { { name: 'Alice' } => 21 }

let personMap = new Map();
personMap.set('Alice', { name: 'Alice', age: 20 });
personMap.set('Alice', { name: 'Alice', age: 21 });

console.log(personMap);
// Map { 'Alice' => { name: 'Alice', age: 21 } }

Pro Members Only

This lesson is available if you have an active subscription.

Alternatively, some member might be able to gift it to you.

Professional Modern JavaScript Lessons

JavaScript Map Builtin - HashMap Magic

Subscription Required

Introduction

Iterables

Map Keys

Insertion Order is Preserved

Methods and Properties

Map to Object to Map

Map Uses Strict Equality

Transcript

Professional Modern JavaScript