JavaScript Maps and Methods for Beginners

The map object in JavaScript holds key-value pairs and remembers the original insertion order of the keys. In this article, I’ll be explaining how maps works in JavaScript including all it’s instance methods.

A key in the map may only occur once which makes it unique in the Map’s collection.

const keyboard = new Map();  // Creates a new Map

keyboard.set('a', 1); // Adds key a to the keyboard map
keyboard.set('b', 2); // Adds key b to the keyboard map
keyboard.set('c', 3); // Adds key c to the keyboard map
keyboard.set('d', 4); // Adds key d to the keyboard map

console.log(keyboard.get('a')); // Retrieves the value of a
keyboard.set('a', 97); // Changes the value of key a
console.log(keyboard.get('a')); 
console.log(keyboard.size); // Gets the size of the map
keyboard.delete('b'); // Deletes the value of b
console.log(keyboard);
console.log(keyboard.size);

Object vs. Maps

Object is similar to Map as both allows you to set keys to values, retrieve those values, delete keys and detect whether something is stored at a key. Which is why historically, Object has been used as Map.

MAPS INSTANCE METHODS

1. Map.prototype.clear() — Removes all key-value pairs from the Map object

const keyboard = new Map();

keyboard.set('c', 'do');
keyboard.set('d', 're');
keyboard.set('e', 'mi');
keyboard.set('f', 'fa');
keyboard.set('g', 'so');
keyboard.set('a', 'la');
keyboard.set('b', 'ti');

console.log(keyboard);
keyboard.clear();
console.log(keyboard.size);

2. Map.prototype.delete() — Returns true if an element in the Map object existed and has been removed, or false if the element does not exist. map.has(key) will return false afterwards.

const keyboard = new Map();

keyboard.set('c', 'do');
keyboard.set('d', 're');
keyboard.set('e', 'mi');
keyboard.set('f', 'fa');
keyboard.set('g', 'so');
keyboard.set('a', 'la');
keyboard.set('b', 'ti');

keyboard.delete('c');
console.log(keyboard.has('c'));

3. Map.prototype.entries() — Returns a map new iterator object that contains the [key, value] pairs for each element in the Map object in insertion order.

const keyboard = new Map();

keyboard.set('c', 'do');
keyboard.set('d', 're');
keyboard.set('e', 'mi');
keyboard.set('f', 'fa');
keyboard.set('g', 'so');
keyboard.set('a', 'la');
keyboard.set('b', 'ti');

const iterator = keyboard.entries();

console.log(iterator.next().value);
console.log(iterator.next().value);
console.log(iterator.next().value);
console.log(iterator.next().value);

4. Map.prototype.forEach() — Executes a provided function once per each key/value pair in the Map object, in insertion order

function logMapElements(value, key, map) {
    console.log(`m[${key}] = ${value}`);
}

console.log(new Map([["foo", 3], ["bar", {}], ["baz", undefined]]).forEach(logMapElements));

5. Map.prototype.get() — Returns the value associated to the passed key, or undefined if there is none.

const keyboard = new Map();

keyboard.set('c', 'do');
keyboard.set('d', 're');
keyboard.set('e', 'mi');
keyboard.set('f', 'fa');
keyboard.set('g', 'so');
keyboard.set('a', 'la');
keyboard.set('b', 'ti');


console.log(keyboard.get('a'));
console.log(keyboard.get('f'));

6. Map.prototype.has() — Returns a boolean indicating whether a value has been associated with the passed key in the Map object or not.

const keyboard = new Map();

keyboard.set('c', 'do');
keyboard.set('d', 're');
keyboard.set('e', 'mi');
keyboard.set('f', 'fa');
keyboard.set('g', 'so');
keyboard.set('a', 'la');
keyboard.set('b', 'ti');


console.log(keyboard.has('a'));
console.log(keyboard.has('z'));

7. Map.prototype.keys() — Returns a new iterator object that contains the keys for each element in the Map object in insertion order.

const keyboard = new Map();

keyboard.set('c', 'do');
keyboard.set('d', 're');
keyboard.set('e', 'mi');
keyboard.set('f', 'fa');
keyboard.set('g', 'so');
keyboard.set('a', 'la');
keyboard.set('b', 'ti');

const iterator = keyboard.keys();
console.log(iterator.next().value);
console.log(iterator.next().value);
console.log(iterator.next().value);

8. Map.prototype.set() — Adds or updates an entry in a Map object with a specified key and a value.

const keyboard = new Map();

keyboard.set('c', 'do');
keyboard.set('d', 're');
keyboard.set('e', 'mi');
keyboard.set('f', 'fa');
keyboard.set('g', 'so');
keyboard.set('a', 'la');
keyboard.set('b', 'ti');

console.log(keyboard.get("c"));
console.log(keyboard.get("d"));

9. Map.prototype.values() — Returns a new map iterator object that contains the values for each element in the Map object in insertion order.

const keyboard = new Map();

keyboard.set('c', 'do');
keyboard.set('d', 're');
keyboard.set('e', 'mi');
keyboard.set('f', 'fa');
keyboard.set('g', 'so');
keyboard.set('a', 'la');
keyboard.set('b', 'ti');

const iterator = keyboard.values();

console.log(iterator.next().value);
console.log(iterator.next().value);
console.log(iterator.next().value);

10. Map.prototype[@@iterator]() — Returns a new iterator object that contains a two-member array of [key, value] for each element in the Map object in insertion order.

const keyboard = new Map();

keyboard.set('c', 'do');
keyboard.set('d', 're');
keyboard.set('e', 'mi');
keyboard.set('f', 'fa');
keyboard.set('g', 'so');
keyboard.set('a', 'la');
keyboard.set('b', 'ti');

const iterator = keyboard[Symbol.iterator]();

for (const item of iterator) {
    console.log(item);
}

I hope by now you’ve understand the concepts behind maps in JavaScript. This resources was made possible by the mozilla documentation which I’ve personally been using so far. If you’re looking to learn about JavaScript as a beginner, I highly recommend you check it out.

I hope this article has been so helpful to you. Don’t forget to give me a clap 👏 share this article & follow me on my social media handles: twitter , facebook and youtube.