DEV Community

Cover image for Map in JS
_Khojiakbar_
_Khojiakbar_

Posted on

10

Map in JS

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;

  1. Unique Keys: Each key in a Map is unique.
  2. Any Data Type for Keys: Unlike objects, keys can be of any data type, including functions, objects, or any primitive type.
  3. Iterable: You can iterate over the keys, values, or entries of a Map.

Basic Operations

Creating a Map

let funnyMap = new Map();
Enter fullscreen mode Exit fullscreen mode

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?');
Enter fullscreen mode Exit fullscreen mode

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?
Enter fullscreen mode Exit fullscreen mode

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)
Enter fullscreen mode Exit fullscreen mode

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)
Enter fullscreen mode Exit fullscreen mode

Getting the Size of the Map

console.log(funnyMap.size); // 3 after deletion

// Funny example
console.log(`The map has ${funnyMap.size} jokes left.`);
Enter fullscreen mode Exit fullscreen mode

Clearing the Map

funnyMap.clear();
console.log(funnyMap.size); // 0

// Funny example
console.log(`All jokes are cleared from the map.`);
Enter fullscreen mode Exit fullscreen mode

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}`);
}
Enter fullscreen mode Exit fullscreen mode

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}`);
});
Enter fullscreen mode Exit fullscreen mode

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`);
});
Enter fullscreen mode Exit fullscreen mode

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.

Do your career a big favor. Join DEV. (The website you're on right now)

It takes one minute, it's free, and is worth it for your career.

Get started

Community matters

Top comments (4)

Collapse
 
stevo82930 profile image
Stevo82930 • Edited

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.

Collapse
 
martinbaun profile image
Martin Baun

Great guideline! Thanks for sharing

Collapse
 
mukhriddinweb profile image
Mukhriddin Khodiev (work)

nice

Collapse
 
dipakahirav profile image
Dipak Ahirav

Useful nice one.

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

👋 Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay