Dans cet article, nous allons découvrir un concept fondamental dans le développement de JavaScript aujourd'hui: les fermetures. Nous allons comprendre le fonctionnement de Closures, pourquoi ce concept est si populaire parmi les développeurs et comment tirer parti de son utilisation dans notre code.
Si vous avez utilisé JavaScript dans vos projets ou dans vos entreprise pendant un certain temps, vous avez peut-être entendu parler de fermetures. Beaucoup de développeurs aiment ce concept, mais il semble que les fermetures restent un mystère. Parfois, les développeurs l’utilisent même quotidiennement dans leur code et ne le savent pas encore! Le problème avec les fermetures, c'est qu'elles semblent être un mystère entre les développeurs – parfois, un développeur peut même savoir plus ou moins comment fonctionne une fermeture, mais ne sait pas exactement comment l'expliquer.
La meilleure façon que j'ai trouvée d'apprendre ou d'étudier quelque chose est de lire tout ce qui se rapporte à un sujet et de s’exercer à le mettre en œuvre, puis de l’expliquer à un autre développeur. J'ai trouvé qu'il semblait souvent simple d'expliquer un concept à un autre développeur, car je sais comment cela fonctionne moi-même, mais il est beaucoup plus compliqué de trouver les mots justes pour l'expliquer à une autre personne.
C'est pourquoi nous allons plonger. profondément dans cet article et apprendre tout ce que nous pouvons sur les fermetures, puis écrivez quelques cas où nous pouvons voir les avantages. Après cela, vous pourrez expliquer en une phrase simple ce que sont les fermetures en JavaScript et leur fonctionnement. Alors, commençons!
Un peu sur Scope
En JavaScript, pour comprendre Closures, nous devons d'abord comprendre un peu sur Scope et son fonctionnement.
Chaque fois que vous déclarez une nouvelle fonction en JavaScript, cela signifie que vous créez une nouvelle portée de fonction. Par exemple, imaginons que nous allons créer la fonction suivante:
function sayMyAge (yearOfBirth: number) {
année const = 2019;
const myAge = year - yearOfBirth;
return `Votre âge est: $ {myAge}`;
};
Comme vous pouvez le constater, la fonction de sayMyAge
effectue simplement un calcul et renvoie l'âge d'une personne donnée. Dans cette fonction, nous avons une variable appelée année
qui est l'année en cours et la variable myAge
qui est notre âge calculé.
Cette fonction ayant son propre champ d'application, et comme nous le savons, toutes les variables et fonctions que nous avons dans une fonction appartiennent à cette fonction en JavaScript; si nous essayons de l'appeler en dehors de notre fonction, nous allons recevoir une erreur.
console.log ( an); // ReferenceError
console.log (myAge); // ReferenceError
Qu'est-ce que cette erreur nous dit exactement? Cela nous indique que ces variables spécifiques ne sont pas disponibles pour la portée globale et c’est la raison pour laquelle nous recevons cette erreur. Nous essayons de renvoyer quelque chose qui n'est pas disponible dans la portée globale, mais uniquement dans une portée de fonction, dans notre cas, la portée de fonction sayMyAge
.
L'un des avantages de l'utilisation d'une portée de fonction pour masquer Les variables et les fonctions permettent d’éviter les conflits entre les noms de variables et les fonctions. Si vous rencontrez une collision entre des valeurs dans votre code, cela signifie que vous pouvez avoir un écrasement inattendu des valeurs.
Maintenant que nous en savons un peu sur Scope en JavaScript, apprenons-en davantage sur les fermetures et leur fonctionnement.
Compréhension. Fermetures
Pour comprendre exactement le fonctionnement d'une fermeture, nous allons utiliser notre fonction sayMyAge
et y apporter des modifications. Premièrement, nous allons créer une nouvelle fonction dans notre fonction sayMyAge
et cette fonction s'appellera logAge
.
Nous allons déplacer une partie de notre fonction dans cette nouvelle fonction logAge
et la variable de année
que nous avions auparavant, nous allons maintenir à l'intérieur du champ d'application interne de sayMyAge
. Ainsi, notre fonction sayMyAge
va ressembler à ceci:
function sayMyAge (yearOfBirth: number) {
année const = 2019;
fonction logAge (yearOfBirth) {
const myAge = year - yearOfBirth;
return `Votre âge est: $ {myAge}`;
}
retourne logAge;
};
Comme vous pouvez le constater, notre variable année a été déplacée dans la portée interne de la fonction sayMyAge
. Ensuite, nous avons créé une nouvelle fonction appelée logAge
qui va retourner notre âge, sur la base d’un calcul effectué à l’aide de la variable année
et de annéeOnBirth
. est notre paramètre de fonction.
Maintenant, sur notre portée globale, nous allons créer une nouvelle variable appelée age et attribuer à cette variable notre fonction sayMyAge
comme ceci:
const age = sayMyAge;
Si nous essayons de consoler cette variable d’âge, nous allons recevoir notre valeur de fonction sayMyAge
puisque nous ne l’invoquons pas.
const age = sayMyAge;
console.log (age);
// Résultat:
//
Passons maintenant à un changement rapide et voyons ce qui se passe. Tout d’abord, redéclarons la variable age
; au lieu de cela, cette fois, nous allons invoquer la fonction sayMyAge
. De plus, lorsque nous consoleons la variable age
nous allons l’invoquer cette fois et lui passer un an. Voyons ce qui se passe.
const age = sayMyAge ();
console.log (âge (1997));
// Résultat:
// Votre âge est: 22
Nous venons de créer une fermeture! Vous ne savez peut-être pas exactement ce qui s'est passé ici et comment nous avons fini par créer une fermeture, alors allons-y et comprenons-nous pas à pas:
- Nous avons créé notre fonction
sayMyAge
avec unannée
variable à l'intérieur de sa portée intérieure. Nous avons également créé une fonction appeléelogAge
qui utilise la variable deannée
pour calculer notre âge. - La fonction
logAge
utilise sa portée parente, qui est la portéesayMyAge
et obtient la variable année à partir de là. Dans notre fonctionsayMyAge
nous renvoyons uniquement la fonctionlogAge
. - Lorsque nous attribuons la fonction
sayMyAge
à l'âgeditMyAge
. Cela signifie qu'en théorie, nous ne devrions pas avoir accès à la variable annéesayMy
. - Ensuite, lorsque nous appelons
l'âge
et passez un argument à celui-ci, il exécute la fonctionlogAge
en référençant et en utilisant la variable deannée
qui avait déjà été déclarée dans la portéede sayMyAge
.
. , une fermeture est une fonction dans une autre fonction, qui a accès à la portée parente et est exposée à la portée globale. Qu'est-ce que ça veut dire? Cela signifie que cette fonction sera utilisée dans une autre partie du code, ce qui rendra les variables internes privées.
Assez soigné, un concept pas si simple à comprendre au début, mais quand vous réalisez ce qui se passe sous Le capot, vous commencez à admirer la beauté de JavaScript!
Un autre exemple
Créons un autre exemple pour mieux comprendre les fermetures. Nous allons créer une fonction appelée favoriteMovie
qui retournera le film favori d'un individu.
Notre fonction favoriteMovie
sera semblable à la dernière. que nous avons créé, alors cette fois, si vous ne comprenez pas encore la magie de Closures, espérons que vous pourrez avoir votre a-ha! moment.
Notre favoriteMovie
va ressembler à ceci:
function favourMovie (nom: chaîne) {
fonction myFavoriteMovie (movie: string) {
return `Hi $ {name}, votre film préféré est $ {movie}!`;
}
retourner myFavoriteMovie;
}
Comme vous pouvez le constater, notre fonction favoriteMovie
reçoit comme argument un nom
et renvoie une fonction appelée myFavoriteMovie
. Cette fonction reçoit un film
comme argument et renvoie une chaîne de caractères portant le nom
et le film
. Dans l'autre fonction que nous avons créée, nous avions une variable déclarée dans la portée parente – dans ce cas, la fonction sayMyAge
. Dans ce cas, aucune variable ne sera déclarée.
Créons maintenant une variable appelée utilisateur
et transmettons-lui le favoriteMovie
en passant un . ] nom
.
utilisateur const = favoriMovie ("Leonardo");
Maintenant que nous avons attribué un nom à notre fonction, nous allons appeler la fonction utilisateur et transmettre notre film, comme ceci:
console.log (utilisateur ("Pulp Fiction"));
// Résultat:
// Bonjour Leonardo, votre film préféré est Pulp Fiction!
La seule façon de maîtriser et de comprendre les fermetures est de pratiquer! Alors, commencez à créer beaucoup de fonctions, essayez de construire quelque chose de complexe et appliquez ce concept dans le code. Voyez comment cela vous amènera à écrire un code plus concis, plus clair et plus simple.
Les fermetures en JavaScript sont plutôt bien nettes. Ce n'est pas un concept si simple au premier abord, mais lorsque vous apprenez ce qui se passe dans les coulisses, l'élégance de JavaScript brille vraiment!
Conclusion
Dans cet article, nous avons d'abord découvert la portée de JavaScript, Nous avons ensuite appris comment utiliser les fermetures dans JavaScript – comment elles fonctionnent – et comment nous les utilisons depuis longtemps dans notre code sans le savoir. Les clôtures sont également un concept important à maîtriser pour le processus d’entretien, donc si vous souhaitez obtenir rapidement une nouvelle offre d’emploi, c’est un très bon concept à maîtriser et à comprendre. De plus, vous les utiliserez dans tout votre code et une fois que vous les maîtriserez, il deviendra plus facile de coder et de créer de superbes choses.
Read More
Vous souhaitez en savoir plus sur les principes fondamentaux de JavaScript? Consultez Principes fondamentaux de JavaScript: Chaînes de prototypes ensuite.
Source link