Map

• Similar to sets but store key/value pairs

• Set have add, Map have set/get methods

var m = new Map([['one', 'two'], [1,2]]);

console.log(m); // Map {"one" => "two", 1 => 2}
m.set('three', [1,2,3]); 
console.log(m); // Map {"one" => "two", 1 => 2, "three" => [1, 2, 3]}
m.set('four', 4).set('five', 5); 
console.log(m); // Map {"one" => "two", 1 => 2, "three" => [1, 2, 3], "four" => 4, "five" => 5}
console.log(m.get('three')); // [1, 2, 3]
console.log(m.has('one')); true

-----------------------------------
console.log(m.keys());
console.log(m.values());
console.log(m.entries());

// output
MapIterator {"one", 1, "three", "four", "five"}
main.js:12 MapIterator {"two", 2, [1, 2, 3], 4, 5}
main.js:13 MapIterator {["one", "two"], [1, 2], ["three", Array[3]], ["four", 4], ["five", 5]}

Loop over map

You can use forEach or for - of loop

const dogs = new Map();

dogs.set('Sunny', 3);
dogs.set('Tomy', 2);
dogs.set('Tuffy', 10);

dogs.forEach((val, key) => console.log(key, val))
// output
Sunny 3
Tomy 2
Tuffy 10

// for of
for(const [key, val] of dogs ){
    console.log(key, val );
}

Map Use Case ( storing metadata on object )

Store metadata on dom object not on button itself

<button>one</button>
<button>two</button>
<button>three</button>
<button>Four</button>
<button>Five</button>

const clickCounts = new Map();
const buttons = document.querySelectorAll('button');

button.forEach(button => {
    button.addEventListener('click', function(){
        const val = clickCounts.get(this);
        clickCounts.set(this, val + 1);
        console.log(clickCounts);
    });
});