WeakMap et WeakSet JavaScript : Maîtriser les collections à mémoire efficace

JavaScript propose plusieurs structures de données intégrées pour gérer les collections de données. Alors que Map et Set standard fournissent des outils puissants, ils peuvent parfois entraîner des fuites de mémoire, en particulier dans les applications complexes. C'est là que WeakMap et WeakSet entrent en jeu. Ces collections spécialisées offrent une approche unique de la gestion de la mémoire, permettant au ramasse-miettes de JavaScript de récupérer la mémoire plus efficacement.

Comprendre le problème : références fortes

Avant de plonger dans WeakMap et WeakSet, comprenons le problème principal : les références fortes. En JavaScript, lorsqu'un objet est stocké en tant que clé dans un Map ou une valeur dans un Set, la collection maintient une référence forte à cet objet. Cela signifie que tant que le Map ou le Set existe, le ramasse-miettes ne peut pas récupérer la mémoire occupée par l'objet, même si l'objet n'est plus référencé ailleurs dans votre code. Cela peut entraîner des fuites de mémoire, en particulier lorsque vous traitez des collections volumineuses ou de longue durée.

Considérez cet exemple :

            let myMap = new Map();
let key = { id: 1, name: "Example Object" };

myMap.set(key, "Some value");

// Même si 'key' n'est plus utilisé directement...
key = null;

// ... le Map conserve toujours une référence à celui-ci.
console.log(myMap.size); // Output: 1

            

              
                Copy
              
            
          

Dans ce scénario, même après avoir défini key sur null, le Map conserve toujours une référence à l'objet d'origine. Le ramasse-miettes ne peut pas récupérer la mémoire utilisée par cet objet car le Map l'en empêche.

Introduction à WeakMap et WeakSet : références faibles à la rescousse

WeakMap et WeakSet résolvent ce problème en utilisant des références faibles. Une référence faible permet à un objet d'être récupéré par le ramasse-miettes s'il n'y a pas d'autres références fortes vers lui. Lorsque la clé dans un WeakMap ou la valeur dans un WeakSet n'est référencée que de manière faible, le ramasse-miettes est libre de récupérer la mémoire. Une fois l'objet récupéré par le ramasse-miettes, l'entrée correspondante est automatiquement supprimée du WeakMap ou du WeakSet.

WeakMap : paires clé-valeur avec des clés faibles

Un WeakMap est une collection de paires clé-valeur où les clés doivent être des objets. Les clés sont conservées de manière faible, ce qui signifie que si un objet clé n'est plus référencé ailleurs, il peut être récupéré par le ramasse-miettes, et l'entrée correspondante dans le WeakMap est supprimée. Les valeurs, quant à elles, sont conservées avec des références normales (fortes).

Voici un exemple de base :

            let weakMap = new WeakMap();
let key = { id: 1, name: "WeakMap Key" };
let value = "Associated Data";

weakMap.set(key, value);

console.log(weakMap.get(key)); // Output: "Associated Data"

key = null;

// Après le ramasse-miettes (qui n'est pas garanti de se produire immédiatement)...
// weakMap.get(key) pourrait retourner undefined.  Ceci dépend de l'implémentation.
// Nous ne pouvons pas observer directement quand une entrée est supprimée d'un WeakMap, ce qui est intentionnel.

            

              
                Copy
              
            
          

Différences clés par rapport à Map :

• Les clés doivent être des objets : Seuls les objets peuvent être utilisés comme clés dans un WeakMap. Les valeurs primitives (chaînes de caractères, nombres, booléens, symboles) ne sont pas autorisées. En effet, les valeurs primitives sont immuables et ne nécessitent pas de ramasse-miettes de la même manière que les objets.
• Pas d'itération : Vous ne pouvez pas itérer sur les clés, les valeurs ou les entrées d'un WeakMap. Il n'y a pas de méthodes comme forEach, keys(), values() ou entries(). En effet, l'existence de ces méthodes obligerait le WeakMap à maintenir une référence forte à ses clés, ce qui contredit l'objectif des références faibles.
• Pas de propriété size : WeakMap n'a pas de propriété size. La détermination de la taille nécessiterait également d'itérer sur les clés, ce qui n'est pas autorisé.
• Méthodes limitées : WeakMap ne propose que get(key), set(key, value), has(key) et delete(key).

WeakSet : une collection d'objets conservés de manière faible

Un WeakSet est similaire à un Set, mais il ne permet que le stockage d'objets en tant que valeurs. Comme WeakMap, WeakSet conserve ces objets de manière faible. Si un objet dans un WeakSet n'est plus référencé fortement ailleurs, il peut être récupéré par le ramasse-miettes, et le WeakSet supprime automatiquement l'objet.

Voici un exemple simple :

            let weakSet = new WeakSet();
let obj1 = { id: 1, name: "Object 1" };
let obj2 = { id: 2, name: "Object 2" };

weakSet.add(obj1);
weakSet.add(obj2);

console.log(weakSet.has(obj1)); // Output: true

obj1 = null;

// Après le ramasse-miettes (non garanti immédiatement)...
// weakSet.has(obj1) pourrait retourner false.  Ceci dépend de l'implémentation.
// Nous ne pouvons pas observer directement quand un élément est supprimé d'un WeakSet.

            

              
                Copy
              
            
          

Différences clés par rapport à Set :

• Les valeurs doivent être des objets : Seuls les objets peuvent être stockés dans un WeakSet. Les valeurs primitives ne sont pas autorisées.
• Pas d'itération : Vous ne pouvez pas itérer sur un WeakSet. Il n'y a pas de méthode forEach ni d'autres moyens d'accéder aux éléments.
• Pas de propriété size : WeakSet n'a pas de propriété size.
• Méthodes limitées : WeakSet ne propose que add(value), has(value) et delete(value).

Cas d'utilisation pratiques pour WeakMap et WeakSet

Les limitations de WeakMap et WeakSet pourraient les rendre moins polyvalents que leurs homologues plus forts. Cependant, leurs capacités uniques de gestion de la mémoire les rendent inestimables dans des scénarios spécifiques.

1. Métadonnées des éléments DOM

Un cas d'utilisation courant consiste à associer des métadonnées aux éléments DOM sans polluer le DOM. Par exemple, vous souhaiterez peut-être stocker des données spécifiques à un composant associées à un élément HTML particulier. En utilisant un WeakMap, vous pouvez vous assurer que lorsque l'élément DOM est supprimé de la page, les métadonnées associées sont également récupérées par le ramasse-miettes, évitant ainsi les fuites de mémoire.

            let elementData = new WeakMap();

function initializeComponent(element) {
  let componentData = {
    // Données spécifiques au composant
    isActive: false,
    onClick: () => { console.log("Clicked!"); }
  };
  elementData.set(element, componentData);
}

let myElement = document.getElementById("myElement");
initializeComponent(myElement);

// Plus tard, lorsque l'élément est supprimé du DOM :
// myElement.remove();

// Les componentData associés à myElement seront finalement récupérés par le ramasse-miettes
// lorsqu'il n'y aura pas d'autres références fortes à myElement.

            

              
                Copy
              
            
          

Dans cet exemple, elementData stocke les métadonnées associées aux éléments DOM. Lorsque myElement est supprimé du DOM, le ramasse-miettes peut récupérer sa mémoire, et l'entrée correspondante dans elementData est automatiquement supprimée.

2. Mise en cache des résultats d'opérations coûteuses

Vous pouvez utiliser un WeakMap pour mettre en cache les résultats d'opérations coûteuses basées sur les objets d'entrée. Si un objet d'entrée n'est plus utilisé, le résultat mis en cache est automatiquement supprimé du WeakMap, libérant ainsi de la mémoire.

            let cache = new WeakMap();

function expensiveOperation(input) {
  if (cache.has(input)) {
    console.log("Cache hit!");
    return cache.get(input);
  }

  console.log("Cache miss!");
  // Effectuer l'opération coûteuse
  let result = input.id * 100;

  cache.set(input, result);
  return result;
}

let obj1 = { id: 5 };
let obj2 = { id: 10 };

console.log(expensiveOperation(obj1)); // Output: Cache miss!, 500
console.log(expensiveOperation(obj1)); // Output: Cache hit!, 500
console.log(expensiveOperation(obj2)); // Output: Cache miss!, 1000

obj1 = null;

// Après le ramasse-miettes, l'entrée pour obj1 sera supprimée du cache.

            

              
                Copy
              
            
          

3. Données privées pour les objets (WeakMap en tant que champs privés)

Avant l'introduction des champs de classe privés en JavaScript, WeakMap était une technique courante pour simuler des données privées au sein des objets. Chaque objet serait associé à ses propres données privées stockées dans un WeakMap. Comme les données ne sont accessibles que via le WeakMap et l'objet lui-même, elles sont effectivement privées.

            let _privateData = new WeakMap();

class MyClass {
  constructor(secret) {
    _privateData.set(this, { secret: secret });
  }

  getSecret() {
    return _privateData.get(this).secret;
  }
}

let instance = new MyClass("My Secret Value");
console.log(instance.getSecret()); // Output: My Secret Value

// Tenter d'accéder directement à _privateData ne fonctionnera pas.
// console.log(_privateData.get(instance).secret); // Error (si vous aviez d'une manière ou d'une autre accès à _privateData)

// Même si l'instance est récupérée par le ramasse-miettes, l'entrée correspondante dans _privateData sera supprimée.

            

              
                Copy
              
            
          

Bien que les champs de classe privés soient désormais l'approche préférée, la compréhension de ce modèle WeakMap est toujours précieuse pour le code hérité et la compréhension de l'histoire de JavaScript.

4. Suivi du cycle de vie des objets

WeakSet peut être utilisé pour suivre le cycle de vie des objets. Vous pouvez ajouter des objets à un WeakSet lorsqu'ils sont créés, puis vérifier s'ils existent toujours dans le WeakSet. Lorsqu'un objet est récupéré par le ramasse-miettes, il est automatiquement supprimé du WeakSet.

            let trackedObjects = new WeakSet();

function trackObject(obj) {
  trackedObjects.add(obj);
}

function isObjectTracked(obj) {
  return trackedObjects.has(obj);
}

let myObject = { id: 123 };
trackObject(myObject);

console.log(isObjectTracked(myObject)); // Output: true

myObject = null;

// Après le ramasse-miettes, isObjectTracked(myObject) pourrait retourner false.

            

              
                Copy
              
            
          

Considérations globales et meilleures pratiques

Lorsque vous travaillez avec WeakMap et WeakSet, tenez compte de ces bonnes pratiques globales :

• Comprendre le ramasse-miettes : Le ramasse-miettes n'est pas déterministe. Vous ne pouvez pas prédire exactement quand un objet sera récupéré par le ramasse-miettes. Par conséquent, vous ne pouvez pas compter sur WeakMap ou WeakSet pour supprimer immédiatement les entrées lorsqu'un objet n'est plus référencé.
• Éviter la surutilisation : Bien que WeakMap et WeakSet soient utiles pour la gestion de la mémoire, ne les utilisez pas de manière excessive. Dans de nombreux cas, Map et Set standard sont parfaitement adéquats et offrent plus de flexibilité. Utilisez WeakMap et WeakSet lorsque vous avez spécifiquement besoin de références faibles pour éviter les fuites de mémoire.
• Cas d'utilisation des références faibles : Réfléchissez à la durée de vie de l'objet que vous stockez en tant que clé (pour WeakMap) ou en tant que valeur (pour WeakSet). Si l'objet est lié au cycle de vie d'un autre objet, utilisez WeakMap ou WeakSet pour éviter les fuites de mémoire.
• Défis de test : Tester le code qui repose sur le ramasse-miettes peut être difficile. Vous ne pouvez pas forcer le ramasse-miettes en JavaScript. Envisagez d'utiliser des techniques telles que la création et la destruction d'un grand nombre d'objets pour encourager le ramasse-miettes pendant les tests.
• Polyfilling : Si vous devez prendre en charge les anciens navigateurs qui ne prennent pas en charge nativement WeakMap et WeakSet, vous pouvez utiliser des polyfills. Cependant, les polyfills peuvent ne pas être en mesure de reproduire entièrement le comportement de la référence faible, alors testez-les minutieusement.

Exemple : Cache d'internationalisation (i18n)

Imaginez un scénario où vous créez une application Web avec la prise en charge de l'internationalisation (i18n). Vous voudrez peut-être mettre en cache les chaînes traduites en fonction des paramètres régionaux de l'utilisateur. Vous pouvez utiliser un WeakMap pour stocker le cache, où la clé est l'objet des paramètres régionaux et la valeur est les chaînes traduites pour ces paramètres régionaux. Lorsqu'un paramètre régional n'est plus nécessaire (par exemple, l'utilisateur passe à une autre langue et les anciens paramètres régionaux ne sont plus référencés), le cache pour ce paramètre régional sera automatiquement récupéré par le ramasse-miettes.

            let i18nCache = new WeakMap();

function getTranslatedStrings(locale) {
  if (i18nCache.has(locale)) {
    return i18nCache.get(locale);
  }

  // Simuler la récupération de chaînes traduites à partir d'un serveur.
  let translatedStrings = {
    "greeting": (locale.language === "fr") ? "Bonjour" : "Hello",
    "farewell": (locale.language === "fr") ? "Au revoir" : "Goodbye"
  };

  i18nCache.set(locale, translatedStrings);
  return translatedStrings;
}

let englishLocale = { language: "en", country: "US" };
let frenchLocale = { language: "fr", country: "FR" };

console.log(getTranslatedStrings(englishLocale).greeting); // Output: Hello
console.log(getTranslatedStrings(frenchLocale).greeting);  // Output: Bonjour

englishLocale = null;

// Après le ramasse-miettes, l'entrée pour englishLocale sera supprimée du cache.

            

              
                Copy
              
            
          

Cette approche empêche le cache i18n de croître indéfiniment et de consommer une mémoire excessive, en particulier dans les applications qui prennent en charge un grand nombre de paramètres régionaux.

Conclusion

WeakMap et WeakSet sont des outils puissants pour la gestion de la mémoire dans les applications JavaScript. En comprenant leurs limites et leurs cas d'utilisation, vous pouvez écrire un code plus efficace et robuste qui évite les fuites de mémoire. Bien qu'ils ne soient pas adaptés à tous les scénarios, ils sont essentiels pour les situations où vous devez associer des données à des objets sans empêcher ces objets d'être récupérés par le ramasse-miettes. Adoptez ces collections pour optimiser vos applications JavaScript et créer une meilleure expérience pour vos utilisateurs, où qu'ils soient dans le monde.