🗺️ JavaScript Maps : Découvrez des structures de données puissantes (et vraiment, découvrez-les 😎)

Bonjour 💖
Aujourd’hui, nous allons faire une rencontre profonde, chaleureuse et pleine de rires avec une structure de données charismatique qui se promène dans l’univers JavaScript en disant :
« Je ne suis pas un objet, je suis une Map. »

Cet article ne va pas juste effleurer le sujet.
Cet article sera :

• rempli d’exemples 🧪
• plein d’analogies issues de la vraie vie 🧠
• chargé d’astuces pratiques 🛠️
• de ceux qui te font dire : « Aaaah, maintenant je comprends ! » 💡

Si tu es prêt(e)…
Mettons Map sur scène 🎤

🤔 Qu’est-ce qu’une Map en JavaScript ? (En quoi est-elle différente d’un Object?)

En JavaScript, la plupart des gens utilisent automatiquement les Object pour stocker des données.
Mais Map arrive et dit :

« Moi, je fais ça de manière un peu plus premium. » 😌

Une Map est une structure de données basée sur le principe clé–valeur, mais qui le fait de façon plus claire, plus flexible et plus performante.

🔑 Quelle est la plus grande différence ?

Dans une Map, tu peux utiliser ABSOLUMENT TOUT comme clé :

• string
• number
• boolean
• object
• array
• function

Avec les Object, on reste souvent coincé avec des clés de type string.

🛠️ Comment créer une Map

Le début est très simple :

const myMap = new Map();

Que fait cette ligne ?

• Elle crée une nouvelle Map
• Elle est vide pour l’instant
• Comme un tout nouveau carnet 📓

Tu peux aussi créer une Map avec des données initiales :

const userMap = new Map([
  ["name", "Cansu"],
  ["age", 25],
  ["isDeveloper", true]
]);

📌 Chaque ligne est une paire [clé, valeur].
Map dit : « Merci d’arriver bien organisé(e). » 😌

➕ Ajouter des données : set()

Le mot préféré de Map : set 💅

myMap.set("city", "Istanbul");
myMap.set(34, "Plaque d’immatriculation");
myMap.set(true, "Oui, ceci peut aussi être une clé");

Que nous dit ce code ?

• set(key, value) → ajoute une donnée
• Les clés sont uniques (une clé identique écrase l’ancienne valeur)
• Le type de donnée n’a aucune importance — Map est un esprit libre 🕊️

🔥 Astuce pro :

myMap.set("a", 1).set("b", 2).set("c", 3);

Oui… tu peux les enchaîner 😎

🔍 Lire des données : get()

On veut toujours récupérer ce qu’on ajoute.
Map ne te brise jamais le cœur 💖

myMap.get("city"); // "Istanbul"
myMap.get(34);     // "Plaque d’immatriculation"

Et si ça n’existe pas ?

myMap.get("country"); // undefined

Pas de drame.
Pas d’erreur.
Elle dit simplement : « Pas ici. » 😌

❓ La clé existe-t-elle ? has()

Pour vérifier si une clé existe :

myMap.has("city");    // true
myMap.has("country"); // false

🧠 Analogie de la vraie vie :
« Y a-t-il du chocolat dans ce placard ? » 🍫

❌ Supprimer des données : delete()

Comme quand tu enlèves certaines choses de ta vie…
Tu peux aussi les enlever d’une Map 😌

myMap.delete(34);

Si elle existe, elle est supprimée.
Sinon, Map continue tranquillement.
Zéro drama.

🧹 Tout supprimer : clear()

Pour celles et ceux qui disent : « J’ai besoin d’un nouveau départ » :

myMap.clear();

La Map est impeccable.
Nouvelle page, nouveaux espoirs ✨

📏 Taille d’une Map : size

La fameuse galère avec les Object :

Object.keys(obj).length;

Map regarde ça et répond simplement :

myMap.size;

C’est tout.
Minimalisme ✨

🔁 Parcourir une Map

Avec forEach :

myMap.forEach((value, key) => {
  console.log(key, value);
});

📌 L’ordre est conservé
📌 Parcourt dans l’ordre d’insertion
📌 Tu gardes le contrôle 😎

Avec for…of (la méthode la plus cool)

for (const [key, value] of myMap) {
  console.log(key, value);
}

Cette structure est nativement compatible avec Map.
Lisible, propre, stylée 💅

🧠 Utiliser des objets comme clés dans une Map (là où la magie opère)

const user = { id: 1 };
const settings = new Map();

settings.set(user, "Admin");

👉 Même objet = même clé
👉 Impossible de faire ça correctement avec un Object

Cette fonctionnalité rend Map légendaire 💥

🆚 Map vs Object (comparaison réaliste)

🎯 Quand faut-il utiliser une Map ?

✔ Quand tu as besoin d’objets ou de fonctions comme clés
✔ Quand l’ordre est important
✔ Quand tu ajoutes/supprimes souvent des éléments
✔ Quand tu veux un code plus lisible et plus propre

👉 Map est le bon choix💖

💡 Mini astuces pratiques

✨ Les Map ne se convertissent pas directement en JSON (il faut passer par un tableau)
✨ Les Map adorent les références, les primitives doivent correspondre exactement
✨ Tu peux cloner une Map avec new Map(existingMap)

❤️ Conclusion : Map = Monter de niveau en JavaScript

Quand tu commences à utiliser les Map, tu ressens ça :

« Je n’écris plus du code au hasard… je sais ce que je fais. » 😎

Code plus propre
Moins de bugs
Plus de sérénité 🌿