JavaScript Map Reference
Complete reference guide for JavaScript Map methods and properties
📚 Map Reference Guide
This comprehensive reference covers all JavaScript Map methods, properties, and usage patterns. Use this as your go-to guide for Map operations.
// Quick Map reference example
const map = new Map([['key1', 'value1'], ['key2', 'value2']]);
console.log(map.size); // 2
console.log(map.get('key1')); // "value1"
console.log([...map.keys()]); // ["key1", "key2"]
Output:
2
value1
["key1", "key2"]
Map Constructor
Syntax: new Map([iterable])
Creates a new Map object with optional initial entries.
// Empty Map
const map1 = new Map();
// Map with initial entries (array of [key, value] pairs)
const map2 = new Map([
['name', 'Alice'],
['age', 25],
['city', 'New York']
]);
// Map from another Map
const map3 = new Map(map2);
// Map from other iterables
const map4 = new Map(Object.entries({ a: 1, b: 2 }));
console.log(map2.size); // 3
console.log(map4.get('a')); // 1Output:
3
1
🔹 Map Properties
size
Returns the number of entries
console.log(map.size);constructor
References the Map constructor
map.constructor === Mapconst fruits = new Map([
['apple', 5],
['banana', 3],
['orange', 8]
]);
console.log('Number of fruits:', fruits.size);
console.log('Is Map?', fruits.constructor === Map);
// Size changes with operations
fruits.set('grape', 12);
console.log('After adding grape:', fruits.size);
fruits.delete('banana');
console.log('After removing banana:', fruits.size);Output:
Number of fruits: 3
Is Map? true
After adding grape: 4
After removing banana: 3
🔹 Map Methods Reference
🔸 Modification Methods
- set(key, value): Adds or updates an entry. Returns the Map.
- delete(key): Removes an entry. Returns true if removed, false if not found.
- clear(): Removes all entries. Returns undefined.
const inventory = new Map();
// set() - Add/update entries
inventory.set('laptops', 10)
.set('mice', 25)
.set('keyboards', 15);
console.log('Initial inventory:', inventory.size);
// delete() - Remove specific entry
const removed = inventory.delete('mice');
console.log('Mice removed:', removed);
console.log('After deletion:', inventory.size);
// clear() - Remove all entries
inventory.clear();
console.log('After clear:', inventory.size);Output:
Initial inventory: 3
Mice removed: true
After deletion: 2
After clear: 0
🔸 Access Methods
- get(key): Returns the value for key, or undefined if not found.
- has(key): Returns true if key exists, false otherwise.
const settings = new Map([
['theme', 'dark'],
['language', 'en'],
['notifications', true]
]);
// get() - Retrieve values
console.log('Theme:', settings.get('theme'));
console.log('Font size:', settings.get('fontSize')); // undefined
// has() - Check existence
console.log('Has theme?', settings.has('theme'));
console.log('Has font size?', settings.has('fontSize'));
// Safe value retrieval with default
const fontSize = settings.has('fontSize')
? settings.get('fontSize')
: '14px';
console.log('Font size with default:', fontSize);Output:
Theme: dark
Font size: undefined
Has theme? true
Has font size? false
Font size with default: 14px
🔸 Iteration Methods
- keys(): Returns an iterator for keys.
- values(): Returns an iterator for values.
- entries(): Returns an iterator for [key, value] pairs.
- forEach(callback, thisArg): Executes callback for each entry.
const scores = new Map([
['Alice', 95],
['Bob', 87],
['Charlie', 92]
]);
// keys() - Get all keys
console.log('Players:', [...scores.keys()]);
// values() - Get all values
console.log('Scores:', [...scores.values()]);
// entries() - Get all [key, value] pairs
console.log('Entries:', [...scores.entries()]);
// forEach() - Execute function for each entry
console.log('Score report:');
scores.forEach((score, player, map) => {
console.log(`${player}: ${score} (Total players: ${map.size})`);
});
// for...of iteration (uses entries() by default)
console.log('Using for...of:');
for (const [player, score] of scores) {
console.log(`${player} scored ${score}`);
}Output:
Players: ["Alice", "Bob", "Charlie"]
Scores: [95, 87, 92]
Entries: [["Alice", 95], ["Bob", 87], ["Charlie", 92]]
Score report:
Alice: 95 (Total players: 3)
Bob: 87 (Total players: 3)
Charlie: 92 (Total players: 3)
Using for...of:
Alice scored 95
Bob scored 87
Charlie scored 92
🔹 Map vs Object Comparison
| Feature | Map | Object |
|---|---|---|
| Key Types | Any type | Strings, Symbols |
| Size | map.size | Object.keys(obj).length |
| Iteration | Directly iterable | Need Object.keys() |
| Performance | Better for frequent additions/deletions | Optimized for records |
// Demonstrating key type differences
const map = new Map();
const obj = {};
// Map can use any type as key
map.set(1, 'number key');
map.set('1', 'string key');
map.set(true, 'boolean key');
map.set({}, 'object key');
console.log('Map entries:', map.size);
console.log('Number key:', map.get(1));
console.log('String key:', map.get('1'));
// Object keys are converted to strings
obj[1] = 'number key';
obj['1'] = 'string key (overwrites number)';
obj[true] = 'boolean key';
console.log('Object keys:', Object.keys(obj));
console.log('obj[1]:', obj[1]);
console.log('obj["1"]:', obj["1"]);
console.log('obj[true]:', obj[true]);
console.log('obj["true"]:', obj["true"]);Output:
Map entries: 4
Number key: number key
String key: string key
Object keys: ["1", "true"]
obj[1]: string key (overwrites number)
obj["1"]: string key (overwrites number)
obj[true]: boolean key
obj["true"]: boolean key
🔹 Common Patterns and Best Practices
🔸 Converting Between Map and Object
// Object to Map
const obj = { name: 'Alice', age: 25, city: 'NYC' };
const mapFromObj = new Map(Object.entries(obj));
console.log('Map from object:', [...mapFromObj]);
// Map to Object
const map = new Map([['x', 1], ['y', 2], ['z', 3]]);
const objFromMap = Object.fromEntries(map);
console.log('Object from map:', objFromMap);
// Alternative: using spread operator
const objFromMap2 = {...Object.fromEntries(map)};
console.log('Alternative conversion:', objFromMap2);Output:
Map from object: [["name", "Alice"], ["age", 25], ["city", "NYC"]]
Object from map: {x: 1, y: 2, z: 3}
Alternative conversion: {x: 1, y: 2, z: 3}