Raccourcis JavaScript: un guide de base

Présenter votre attention est une traduction d'un article de Parathan Thiyagalingam publié sur medium.freecodecamp.org. Vous voulez savoir comment fonctionnent les fermetures JavaScript? Regardez sous le chat!


Photo Austin Distel avec Unsplash

Une fermeture est une combinaison de toutes les variables de la portée au moment où la fonction est créée. Pour utiliser la fermeture, vous devez créer une fonction imbriquée, c'est-à-dire une fonction à l'intérieur de la fonction. La fonction interne aura accès aux variables dans la portée de la fonction externe même après la fin de la fonction externe. (C'est la fermeture qui fournit cet accès.) Chaque fois qu'une fonction est créée, la fermeture est créée.

Avant de commencer à comprendre le concept de fermetures, considérez quelles sont les chaînes de portée en JavaScript.

En règle générale, il existe deux types de zones de visibilité: globale et locale.

En JavaScript, une variable à l'intérieur d'une fonction n'est pas accessible de l'extérieur - contrairement, par exemple, aux variables d'un bloc (dans des conditions comme if et while ).

Sur cette base, une fonction en JavaScript a une portée, mais pas un bloc.

 var a = 10; function app(){ var b = 2; console.log(a); // 10 console.log(b); // 2 } console.log(b); // ReferenceError: b is not defined app(); 

Comme nous le savons déjà, a est une variable globale et b est local, c'est-à-dire utilisé uniquement par la fonction app . En dehors de la portée locale, nous n'avons pas accès à la variable locale.

Comment utiliser une fonction imbriquée (fonction à l'intérieur d'une fonction)

 var a = 10; function app(){ var b = 2; var d = 3; function add(){ var c = a + b; } return add; } var x = app(); console.dir(x); 

Dans l'exemple ci-dessus, app est la fonction parent, add est la fonction enfant.

• Au lieu de console.log, console.dir est utilisé pour afficher toutes les propriétés de l'objet sélectionné.
• La variable x est affectée à la fonction d' app , qui renvoie ensuite la fonction d' add . Cela vous permet de voir toutes les propriétés de l'objet de la fonction d' add .

Si vous ouvrez la console dans un navigateur, vous trouverez l'objet Closure dans le tableau de données Scopes .



Étant donné que la fonction d' add interne a accès aux variables b et d qui appartiennent à la fonction externe, ces deux variables seront ajoutées à l'objet Closure comme référence.
Prenons un autre exemple de fermeture.

 var a = 10; var startFunc; function app(){ var b = 2; function add(){ var c = a + b; console.log(c); } startFunc = add(); } app(); // Invoke the app function startFunc; // as the app function invoked above will assign the add function to startFunc & console the value of c 

• La fonction globale startFunc attribuer la fonction add , qui est un enfant de l' app fonction parent.
• Cela ne devient possible qu'après avoir appelé la fonction app. Sinon, la fonction startFunc se comportera comme une variable globale sans valeur assignée.

Comment utiliser les fermetures en JavaScript

Beaucoup d'entre nous, en utilisant des fermetures lors de l'écriture de code, ne comprennent pas bien pourquoi ils le font. JavaScript n'a pas les modificateurs publics , protégés et privés trouvés dans les langages de programmation orientés objet. Par conséquent, pour bloquer l'accès à l'espace de noms pour le code externe, nous sommes obligés de recourir à l'aide de fonctions.

Et puisque nous parlons de fonctions - la fonction immédiatement appelée (IIFE) commence immédiatement après l'annonce. Elle n'a même pas besoin d'être appelée.

La syntaxe IIFE ressemble à ceci:

 (function(){ //variables & scope that inside the function })(); 

Considérez cet exemple:

 var studnetEnrollment = (function () { //private variables which no one can change //except the function declared below. var count = 0; var prefix = "S"; // returning a named function expression function innerFunc() { count = count + 1; return prefix + count; }; return innerFunc; })(); var x = studnetEnrollment(); // S1 console.log(x); var y = studnetEnrollment(); // S2 console.log(y); 

count et prefix sont deux variables privées qui ne peuvent pas être modifiées. innerFunc accès est ouvert uniquement pour la fonction interne (dans notre cas, il s'agit de la fonction innerFunc ).

• La première fois que la fonction studentEnrollment est appelée, la fonction studentEnrollment augmente la valeur de la variable count à 1.
• La deuxième fois, le count passe de 1 à 2.
• Tout cela n'est possible que par la fermeture.

Conclusion

Une fermeture est un ensemble de variables d'une fonction externe, grâce à quoi la portée de la fonction interne a accès à ces variables. Cela protège l'espace de noms global.

La fonctionnalité de fermeture permet aux développeurs d'écrire du code propre - comme dans les langages de programmation orientés objet, code dans lequel les variables globales et locales ne sont pas confondues.

---

Bon codage!