Data structures in JavaScript: the Map object

Synopsis: We seek to understand the Map object in JavaScript.


The Map object is an object designed to function as the common map data structure found in other languages. A Map is a collection of unique key and value pairs where the key can be is unique and both the key/value may be of any ECMAScript language type (Undefined, Null, Boolean, String, Symbol, Number, and Object). Uniqueness of the key is determined using the SameValueZero comparison algorithm. The SameValueZero comparison algorithm checks if the values are functionally identical in all contexts (not a strict, as in ===, equality). 1, "1", and -1 can all be added to a Map.

The Map object is really an alternative to using a standard JavaScript object as a collection. It is especially useful in the case that you plan to use many different ECMAScript language types as keys instead of just Strings or Symbols (as is standard with ordinary objects). For example, you can use an object as a key that will then be unique, and associate additional data with that object; all without modifying the original contents of your key object.


let object = {
        name: 'Timothy'
    },
    secondObject = {
        name: 'Evil Twin'
    },
    collectionArray = [
        [object, 'Some extra data'],
        [secondObject, 'Also extra data']
    ];

let collection = new Map(collectionArray);

console.log(collection);

// Map {
// { name: 'Timothy' } => 'Some extra data',
// { name: 'Evil Twin' } => 'Also extra data' }

The Map object has some very useful methods for getting and setting our collection.


collection.clear(); // Map {}

collection.set(object, 'Data for days'),
collection.set(secondObject, 'Data for years');

// Map {
//  { name: 'Timothy' } => 'Data for days',
//  { name: 'Evil Twin' } => 'Data for years' }

collection.has(object); // true
collection.get(object); // Data for days

collection.delete(object); // true
collection.has(object); // false

collection.keys(); // MapIterator { { name: 'Timothy' }, { name: 'Evil Twin' } }
collection.values(); // MapIterator { 'Data for days', 'Data for years' }

Map objects, similar to Set objects, can be iterated (also possessing a Map.forEach method). Map objects, while iterable, do not possess a mutable order and operate in order of insertion to the Map.


(function iterateCollection() {
    let entries = collection.entries();

    for (let [key, value] of entries) {
        console.log(`${key}: ${value}`);
    }

})();

// [object Object]: Data for days
// [object Object]: Data for years

collection.forEach(function(value, key, map) {

    for (let properties in key) {
        console.log(`${properties}: ${key[properties]}, value: ${value}`);
    }
});

// name: Timothy, value: Data for days
// name: Evil Twin, value: Data for years

The Map object was originally made standard in ECMA-262's ECMAScript 2015 6th Edition, "ECMAScript® 2015 Language Specification". As of this writing, Maps are not fully implemented in IE11 or implemented at all in Android Browser 4.4/5.0; also worth mentioning is to mind your Node version. Node 6.5 and above should be sufficient for use.[1]


  1. http://kangax.github.io/compat-table/es6/#test-Set ↩︎