𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗖𝗹𝗼𝘀𝘂𝗿𝗲𝘀 𝗘𝘅𝗽𝗹𝗮𝗶𝗻𝗲𝗱 -> 𝗟𝗲𝘀 𝗰𝗹𝗼𝘀𝘂𝗿𝗲𝘀 𝗲𝗻 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗲𝘅𝗽𝗹𝗶𝘲𝘂𝗲́𝗲𝘀

Vous utilisez des closures tous les jours en JavaScript. Vous les utilisez probablement dans les hooks React, les event listeners et les callbacks Node.js. De nombreux développeurs ont du mal avec la théorie, mais le concept est simple une fois que l'on saisit le modèle.

Pour comprendre les closures, vous devez comprendre la portée lexicale (lexical scope).

La portée lexicale signifie qu'une fonction peut accéder aux variables de sa propre portée ainsi qu'à toute portée parente dans laquelle elle a été définie. Cela dépend de l'endroit où vous écrivez le code, et non de l'endroit où vous l'appelez.

Une closure est une fonction qui se souvient des variables de sa portée d'origine, même après que celle-ci a fini de s'exécuter.

Imaginez qu'une fonction porte un sac à dos. Lors de la création de la fonction, elle y range chaque variable dont elle a besoin provenant de son environnement. La fonction emporte ce sac à dos partout avec elle.

Voici comment les closures fonctionnent en pratique :

  • Variables privées : Vous pouvez masquer des données au monde extérieur. Dans l'exemple d'un compte bancaire, la variable balance reste privée. Vous ne pouvez la modifier que via des méthodes spécifiques comme deposit ou withdraw. Cela empêche l'accès direct aux données sensibles.

  • Usines à fonctions (Function Factories) : Vous pouvez créer des fonctions qui produisent d'autres fonctions. Une usine de multiplication peut créer une fonction "double" ou une fonction "triple". Chaque nouvelle fonction conserve son propre multiplicateur spécifique dans son sac à dos.

  • Event Listeners : Lorsque vous attachez un événement click à un bouton, le gestionnaire (handler) se souvient des données de la fonction de configuration (setup function). Même après la fin de l'exécution de la fonction de configuration, l'écouteur conserve ces données.

  • React Hooks : Chaque fois que vous utilisez useState ou useEffect, vous utilisez des closures. Un bug courant dans React survient lorsqu'une closure capture une ancienne valeur de l'état (state). C'est ce qu'on appelle une "stale closure".

Attention à l'utilisation de la mémoire. Comme une closure conserve une référence active aux variables, le moteur ne peut pas les supprimer via le garbage collection tant que la closure existe. Évitez de conserver des objets massifs dans une closure si vous n'en avez pas besoin sur une longue période.

Résumé :

  • La portée lexicale définit l'accès.
  • Les closures rendent cet accès persistant.
  • Une fonction transporte son environnement dans un sac à dos.
  • Utilisez let au lieu de var dans les boucles pour éviter les bugs de portée.

Source: https://dev.to/digitalunicon/javascript-closures-explained-with-examples-339f