Que sont les fermetures JavaScript et comment les écrivez-vous ?

JavaScript est l'un des langages de programmation les plus difficiles à maîtriser. Parfois, même les développeurs expérimentés ne sont pas en mesure de prédire la sortie du code qu'ils ont écrit. L'un des concepts les plus déroutants de JavaScript est celui des fermetures. Les débutants trébuchent généralement sur le concept, ne vous inquiétez pas. Cet article vous guidera lentement à travers les exemples de base pour vous aider à mieux comprendre les fermetures. Commençons.

Que sont les fermetures ?

Une fermeture est une structure d'une fonction et de son environnement lexical, y compris toutes les variables dans la portée de la fonction lors de la création de la fermeture. En termes plus simples, considérons une fonction externe et une fonction interne. La fonction interne aura accès à la portée de la fonction externe.

Avant de regarder quelques exemples de fermeture JavaScript, vous devez comprendre la portée lexicale.

Qu'est-ce qu'un environnement lexical ?

L'environnement lexical est la mémoire locale avec son environnement parent. Consultez l'exemple ci-dessous et devinez la sortie du code suivant :

fonction externe(){ 
 soit a = 10 ;
 console.log (y);
 intérieur();
 fonction interne () {
 console.log (a);
 console.log (y);
 }
}
soit y = 9 ;
extérieur();

La sortie sera 9, 10, 9. La fonction interne a accès aux variables de son parent, le extérieur() une fonction. D'où le intérieur() la fonction peut accéder une variable. le intérieur() fonction peut également accéder variable y en raison de la notion de chaîne de portée.

Le parent de la fonction externe est global, et le parent de la intérieur() la fonction est la extérieur() une fonction. D'où le intérieur() La fonction a accès aux variables de ses parents. Si vous essayez d'accéder à la variable une dans la portée globale, il affichera une erreur. Par conséquent, vous pouvez dire que le intérieur() fonction est lexicalement à l'intérieur du extérieur() fonction, et le parent lexical de la extérieur() la fonction est globale.

Exemples de fermeture JavaScript expliqués

Puisque vous connaissez l'environnement lexical, vous pouvez facilement deviner la sortie du code suivant :

fonction a(){
 soit x = 10 ;
 fonction b(){
 console.log (x);
 }
 b();
}
une();

La sortie est 10. Bien que vous ne le devinez peut-être pas à première vue, il s'agit d'un exemple de fermeture en JavaScript. Les fermetures ne sont rien de plus qu'une fonction et leur environnement lexical.

Prenons un exemple où il y a trois fonctions imbriquées les unes dans les autres :

fonction a(){ 
 soit x = 10 ;
 fonction b(){ 
 fonction c(){
 fonction d(){
 console.log (x);
 }
 ré();
 }
 c();
 }
 b();
}
une();

Cela s'appellera-t-il encore une fermeture? La réponse est oui. Encore une fois, une fermeture est une fonction avec son parent lexical. Le parent lexical de la fonction ré() est c(), et en raison du concept de chaîne de portée, la fonction ré() a accès à toutes les variables des fonctions externes et globales.

Jetez un œil à un autre exemple intéressant :

fonction x(){
 soit a = 9 ;
 fonction de retour y(){
 console.log (a); 
 }
}
soit b = x();

Vous pouvez renvoyer une fonction à l'intérieur d'une fonction, affecter une fonction à une variable et passer une fonction à l'intérieur d'un fonction en JavaScript. C'est la beauté de la langue. Pouvez-vous deviner quelle sera la sortie si vous imprimez la variable b? Il imprimera la fonction y(). La fonction X() renvoie une fonction y(). Par conséquent, la variable b stocke une fonction. Maintenant, pouvez-vous deviner ce qui se passera si vous appelez variable b? Il imprime la valeur de la variable une: 9.

Vous pouvez également obtenir le masquage des données à l'aide de fermetures. Pour une meilleure compréhension, considérons un exemple avec un bouton qui a un identifiant nommé "bouton" sur le navigateur. Attachons-lui un écouteur d'événement click.

Maintenant, vous devez calculer le nombre de fois que le bouton est cliqué. Il y a deux façons de le faire.

1. Créez un nombre de variables globales et incrémentez-le au clic. Mais cette méthode a un défaut. Il est facile d'apporter des modifications aux variables globales car elles sont facilement accessibles.

   Cliquez moi
   
   

2. Nous pouvons obtenir le masquage des données en utilisant des fermetures. Vous pouvez envelopper l'ensemble addEventListener() fonction à l'intérieur d'une fonction. Il fait une fermeture. Et après avoir créé une fermeture, vous pouvez créer un variable de comptage et incrémenter sa valeur au clic. En utilisant cette méthode, la variable restera dans le périmètre fonctionnel, et aucune modification ne peut être apportée.

   Cliquez moi
   
   

En rapport: Le héros caché des sites Web: comprendre le DOM

Pourquoi les fermetures sont-elles importantes ?

Les fermetures sont très importantes non seulement en JavaScript, mais aussi dans d'autres langages de programmation. Ils sont utiles dans de nombreux scénarios où vous pouvez créer des variables dans leur portée privée ou combiner des fonctions, entre autres cas.

Considérez cet exemple de composition de fonction :

const multiplier = (a, b) => a*b;
const multiplierBy2 = x => multiplier (10, x);
console.log (multiplyBy2(9));

Nous pouvons implémenter le même exemple en utilisant des fermetures :

const multiplier = fonction (a){
 fonction de retour (b){
 retourner a*b
 }
}
const multiplierBy2 = multiplier (2) ;
console.log (multiplyBy2(10))

Les fonctions peuvent utiliser des fermetures dans les scénarios suivants :

1. Pour implémenter la fonction curry
2. À utiliser pour masquer des données
3. À utiliser avec les écouteurs d'événement
4. A utiliser dans la méthode setTimeout()

Vous ne devriez pas utiliser les fermetures inutilement

Il est recommandé d'éviter les fermetures à moins que cela ne soit vraiment nécessaire, car elles peuvent réduire les performances de votre application. L'utilisation de la fermeture coûtera beaucoup de mémoire, et si les fermetures ne sont pas gérées correctement, cela peut conduire à fuites de mémoire.

Les variables fermées ne seront pas libérées par le ramasse-miettes de JavaScript. Lorsque vous utilisez des variables à l'intérieur des fermetures, la mémoire n'est pas libérée par le ramasse-miettes car le navigateur a l'impression que les variables sont toujours utilisées. Par conséquent, ces variables consomment de la mémoire et réduisent les performances de l'application.

Voici un exemple qui montre comment les variables à l'intérieur des fermetures ne seront pas ramassées.

 fonction f(){
 const x = 3 ;
 fonction de retour interne () {
 console.log (x);
 }
 }
 F()();

le variable x ici consomme de la mémoire même si elle n'est pas fréquemment utilisée. Le ramasse-miettes ne pourra pas libérer cette mémoire car elle se trouve à l'intérieur de la fermeture.

JavaScript est infini

Maîtriser JavaScript est une tâche sans fin, car il existe de nombreux concepts et frameworks qui ne sont généralement pas explorés par les développeurs expérimentés eux-mêmes. Vous pouvez améliorer considérablement votre maîtrise de JavaScript en apprenant les bases et en les pratiquant fréquemment. Les itérateurs et les générateurs sont quelques-uns des concepts que les interviews demandent lors des interviews JavaScript.

Une introduction aux itérateurs et générateurs en JavaScript

Familiarisez-vous avec les méthodes d'itérateur et de générateur dans JS.

Lire la suite

A propos de l'auteur