Que Sont les Fermetures JavaScript et Comment Les Écrivez-Vous?

Bien que les fermetures soient un sujet difficile à avaler, ce guide les explique d’une manière facile à digérer qui laissera votre cerveau de codage rassasié.

JavaScript est l’un des langages de programmation les plus difficiles à maîtriser. Parfois, même les développeurs seniors ne sont pas en mesure de prédire la sortie du code qu’ils ont écrit. L’un des concepts les plus déroutants en JavaScript est la fermeture. Les débutants ont généralement trébuché 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 extérieure et une fonction intérieure. La fonction interne aura accès à la portée de la fonction externe.

Avant de regarder quelques exemples de fermeture JavaScript, vous devrez 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 donné ci-dessous et devinez la sortie du code suivant:

fonction externe() {
soit a = 10;
console.log (y);
intérieur();
fonction inner() {
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, la fonction outer(). Par conséquent, la fonction inner() peut accéder à la variable a. La fonction inner() peut également accéder à la variable y en raison du concept de chaîne de portée.

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

Exemples de Fermeture JavaScript Expliqués

Puisque vous avez appris l’environnement lexical, vous pouvez facilement deviner la sortie du code suivant:

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

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

Considérons 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);
}
d ();
}
C();
}
d ();
}
un();

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 d() est c(), et en raison du concept de chaîne de portée, la fonction d() a accès à toutes les variables des fonctions externes et globales.

Jetez un oeil à 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’une 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 la variable b? Il imprime la valeur de la variable a:9.

Vous pouvez également masquer les données à l’aide de fermetures. Pour une meilleure compréhension, prenons un exemple avec un bouton qui a un identifiant nommé « bouton » sur le navigateur.

Attachons-y un écouteur d’événement de clic.

Vous devez maintenant calculer le nombre de fois où le bouton est cliqué. Il y a deux façons de le faire.

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

<button id="button">Cliquez sur moi</button>
 <script>
 laisser compter = 0;
 bouton const = document.getElementById ("bouton");

 bouton.addEventListener("cliquez", () => {
 compter++;
 console.log (compter);
 })
 </script>


Nous pouvons masquer les données en utilisant des fermetures. Vous pouvez envelopper toute la fonction addEventListener() dans une fonction. Ça fait une fermeture. Et après avoir créé une fermeture, vous pouvez créer une variable count et incrémenter sa valeur onclick. En utilisant cette méthode, la variable restera dans la portée fonctionnelle et aucune modification ne pourra être apportée.

<button id="button">Cliquez sur moi</button>
 <script>
 bouton const = document.getElementById ("bouton");
 fonction countOnClick() {
 laisser compter = 0;
 bouton.addEventListener("cliquez", () => {
 compter++;
 console.log (compter);
 })
 }
 (Français);
 </script>

Pourquoi Les Fermetures Sont-Elles Importantes?

Les fermetures sont très importantes non seulement en ce qui concerne 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érons cet exemple de composition de fonctions:

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

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

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

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

Pour implémenter la fonction currying
À utiliser pour masquer les données
À utiliser avec les auditeurs d'événements
À utiliser dans la méthode setTimeout()

Vous Ne Devez Pas Utiliser De Fermetures Inutilement

Il est recommandé d’éviter les fermetures sauf si elles sont vraiment nécessaires, 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 entraîner des fuites de mémoire.

Les variables fermées ne seront pas libérées par le garbage collector de JavaScript. Lorsque vous utilisez des variables dans des fermetures, la mémoire n’est pas libérée par le garbage collector car le navigateur estime 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 récupérées.

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

La variable x consomme ici de la mémoire même si elle n’est pas fréquemment utilisée. Le garbage collector 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 entretiens demandent lors des entretiens JavaScript.

%d blogueurs aiment cette page :