JavaScript: the Map Object Tutorial (ES2015)

By Xah Lee. Date: . Last updated: .

Map objects are collections of key/value pairs.

The key can be any JavaScript type.

The value can be any JavaScript type. 〔➤see JavaScript: Data Types

Keys are always distinct.

The insertion order of entries are maintained.

The map object is designed to be used as a map data structure (similar to Python Dictionary or Ruby Hash Table or Java Collection, Map. ).

What's the difference between object and map?

Creating Map

new Map() → creates a empty map.

new Map(iterable) → create a map from values in iterable object iterable.

var m = new Map();

// add new item
m.set(1, "n1");
m.set(2, "n2");

console.log(m) // Map { 1 => 'n1', 2 => 'n2' }

There's no literal expression for map. But you can pass in a literal expression of array of array, like this:

// using nested array as literal expression for map
var m = new Map([ [3, "n3"], [4, "n4"]]);
console.log(m) // Map { 3 => 'n3', 4 => 'n4' }

Add Arbitrary Properties to Map

Because map is a object, you can still add arbitrary properties to a map object. (but you shouldn't do it.)

var m = new Map([[3, "n3"], [4, "n4"], [5, "n5"] ]);

// you can add arbitrary properties to a map object
m.pp = 22;
console.log(m.pp) // 22

console.log(Object.getOwnPropertyNames(m)); // [ 'pp' ]

Parent of Map Objects

The parent (aka prototype) of any map object is Map.prototype.

〔➤see JavaScript: Prototype and Inheritance

Size of Map

map_obj.size → returns the total count of entries in map_obj.

size is a getter property from Map.prototype.size.

// size of map
var m = new Map([[3, "n3"], [4, "n4"], [5, "n5"] ]);
console.log(m.size) // 3

〔➤see JavaScript: Getter/Setter Properties

Set/Add an Entry

Map.prototype.set(key, val) → add an entry to the map. If the key already exist, overwrite its value. Returns the modified map.

// create a map, add entry to it
var m = new Map();
m.set (3, "n3");

// the map is modified
console.log(m) // Map { 3 => 'n3' }

console.log( m.set (4, "n4")); // Map { 3 => 'n3', 4 => 'n4' }
// “set” returns the modified map

ES2015 §Keyed Collection#sec-map.prototype.set

Delete a Entry

Map.prototype.delete(key) → delete the entry of key. Returns true if found, else false.

var m = new Map([[3, "n3"], [4, "n4"], [5, "n5"] ]);

// delete a entry. return true if found
console.log(m.delete(5)); // true

console.log(m.delete(99)); // false

console.log(m); // Map { 3 => 'n3', 4 => 'n4' }

ES2015 §Keyed Collection#sec-map.prototype.delete

Check Existence

Map.prototype.has(key) → return true if key exist. Else, false.

// check existence
var m = new Map([ [4, "n4"], [5, "n5"] ]);
console.log(m.has (5)); // true
console.log(m.has (99)); // false

ES2015 §Keyed Collection#sec-map.prototype.has

Get Value of a Key

Map.prototype.get(key) → return the value of the key key. If key isn't found, return undefined.

var m = new Map([ [4, "n4"], [5, "n5"] ]);

// get the value of a key
console.log(m.get (5)); // "n5"

console.log(m.get (99)); // undefined

ES2015 §Keyed Collection#sec-map.prototype.get

Clear Map

Map.prototype.clear() → delete all entries of the map. Returns undefined.

var m = new Map([[3, "n3"], [4, "n4"], [5, "n5"] ]);

// clear map
console.log(
    m.clear()
); // Returns undefined

console.log(m); // Map {}

ES2015 §Keyed Collection#sec-map.prototype.clear

Iteration

You can use for-of loop.

〔➤see JavaScript: for-of Loop (ES2015)

// Iterating over a Map
var m = new Map([[3, "a"], [4, "b"], [5, "c"] ]);
for (let e of m) { console.log(e); };
// prints

// [ 3, 'a' ]
// [ 4, 'b' ]
// [ 5, 'c' ]

Iteration with forEach

Map.prototype.forEach()

The function is passed 3 arguments: value, key, map_object.

var m = new Map([[3, "n3"], [4, "n4"], [5, "n5"] ]);

// apply a function to each entry
var t = m.forEach(
    function (v, k) {
    console.log(v, k);
    return k;
 } );
// prints

// n3 3
// n4 4
// n5 5

// does not modify the variable
console.log(m); // Map { 3 => 'n3', 4 => 'n4', 5 => 'n5' }

// returns undefined
console.log(t); // undefined

ES2015 §Keyed Collection#sec-map.prototype.foreach

Get All Keys

Map.prototype.keys() → return a iterator for the keys in the map. 〔➤see JavaScript: Iterator (ES2015)

var m = new Map([[3, "n3"], [4, "n4"], [5, "n5"] ]);

console.log( m.keys() ); // MapIterator { 3, 4, 5 }

for (let k of m.keys()) { console.log(k) }

// prints
// 3
// 4
// 5

ES2015 §Keyed Collection#sec-map.prototype.keys

Get All Values

Map.prototype.values() → return a iterator for the values in the map. 〔➤see JavaScript: Iterator (ES2015)

var m = new Map([[3, "n3"], [4, "n4"], [5, "n5"] ]);

console.log( m.values() ); // MapIterator { 'n3', 'n4', 'n5' }

for (let k of m.values()) { console.log(k) }

// prints
// n3
// n4
// n5

ES2015 §Keyed Collection#sec-map.prototype.values

How Map Determines Uniqueness of Keys

The equality test used for determining whether 2 keys in a map is the same as ===, except treatment of NaN (not a number).

NaN === NaN returns false, but for map object, NaN is considered same as any NaN.

// this is false
console.log(NaN === NaN); // false

// for map object, NaN is same as any NaN
var m = new Map();
m.set(NaN, "n1");
m.set(NaN, "n2");

console.log(m) // Map { NaN => 'n2' }

Reference

ES2015 §Keyed Collection#sec-map-objects

Map Topic

  1. JavaScript: the Map Object Tutorial (ES2015)
  2. JavaScript: Map Object and Properties (ES2015)
  3. JavaScript: Map.prototype and Properties (ES2015)
Like what you read? Buy JavaScript in Depth
or, buy a new keyboard, see Keyboard Reviews.