A Map in JavaScript is a collection of key-value pairs where keys can be of any type. It retains the order of insertion, meaning that the items are iterated in the order they were added.
Key Characteristics of a Map;
- Unique Keys: Each key in a Map is unique.
- Any Data Type for Keys: Unlike objects, keys can be of any data type, including functions, objects, or any primitive type.
- Iterable: You can iterate over the keys, values, or entries of a Map.
Basic Operations
Creating a Map
let funnyMap = new Map();
Adding Elements to a Map
funnyMap.set('a', 1); // string key
funnyMap.set(2, 'two'); // number key
funnyMap.set(true, 'yes'); // boolean key
funnyMap.set({name: 'obj'}, 'object'); // object key
// Funny example
funnyMap.set('knock-knock', 'who’s there?');
Getting Values from a Map
console.log(funnyMap.get('a')); // 1
console.log(funnyMap.get(2)); // two
console.log(funnyMap.get(true)); // yes
// Funny example
console.log(funnyMap.get('knock-knock')); // who’s there?
Checking for a Key
console.log(funnyMap.has('a')); // true
console.log(funnyMap.has(42)); // false
// Funny example
console.log(funnyMap.has('chicken')); // false (It crossed the road)
Removing an Element
funnyMap.delete('a');
console.log(funnyMap.has('a')); // false
// Funny example
funnyMap.delete('knock-knock');
console.log(funnyMap.get('knock-knock')); // undefined (No one answered)
Getting the Size of the Map
console.log(funnyMap.size); // 3 after deletion
// Funny example
console.log(`The map has ${funnyMap.size} jokes left.`);
Clearing the Map
funnyMap.clear();
console.log(funnyMap.size); // 0
// Funny example
console.log(`All jokes are cleared from the map.`);
Iterating Over a Map
Using for...of
funnyMap.set('banana', 'yellow');
funnyMap.set('apple', 'red');
funnyMap.set('grape', 'purple');
// Iterating over keys
for (let key of funnyMap.keys()) {
console.log(`Key: ${key}`);
}
// Iterating over values
for (let value of funnyMap.values()) {
console.log(`Value: ${value}`);
}
// Iterating over entries
for (let [key, value] of funnyMap.entries()) {
console.log(`Key: ${key}, Value: ${value}`);
}
// Funny example
funnyMap.set('dad joke', 'What do you call fake spaghetti? An impasta!');
for (let [key, value] of funnyMap.entries()) {
console.log(`Here’s a ${key}: ${value}`);
}
Using forEach
funnyMap.forEach((value, key) => {
console.log(`Key: ${key}, Value: ${value}`);
});
// Funny example
funnyMap.set('bad pun', 'I’m reading a book on anti-gravity. It’s impossible to put down!');
funnyMap.forEach((value, key) => {
console.log(`Here’s a ${key}: ${value}`);
});
Practical Uses
Word Counting (Funny Version)
Imagine you want to count how many times certain words appear in a joke collection:
let jokeText = "Why did the scarecrow win an award? Because he was outstanding in his field!";
// Splitting text into words
let words = jokeText.split(/\W+/);
let wordCount = new Map();
words.forEach(word => {
word = word.toLowerCase();
if (wordCount.has(word)) {
wordCount.set(word, wordCount.get(word) + 1);
} else {
wordCount.set(word, 1);
}
});
wordCount.forEach((count, word) => {
console.log(`Word: ${word}, Count: ${count}`);
});
// Funny example
console.log('Word counts in our joke:');
wordCount.forEach((count, word) => {
console.log(`"${word}": ${count} times`);
});
Summary
A Map in JavaScript is a versatile data structure that can hold key-value pairs of any data type, provides easy iteration methods, and maintains the order of elements. It's useful for scenarios where you need a more flexible key management than a regular object, such as counting words in jokes or storing responses to various riddles.
Top comments (4)
I really needed this enlightenment for my project right now. Thank you Khojiak! I only ever thought of Map() for passing numbers through functions because I was getting it confused with array.map() and my own ignorance. Now I will be writing my code differently.
Great guideline! Thanks for sharing
nice
Useful nice one.