Principes fondamentaux de JavaScript: fermetures

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:

1. Nous avons créé notre fonction sayMyAge avec un année variable à l'intérieur de sa portée intérieure. Nous avons également créé une fonction appelée logAge qui utilise la variable de année pour calculer notre âge.
2. La fonction logAge utilise sa portée parente, qui est la portée sayMyAge et obtient la variable année à partir de là. Dans notre fonction sayMyAge nous renvoyons uniquement la fonction logAge .
3. Lorsque nous attribuons la fonction sayMyAge à l'âge variable, nous avons perdu la portée interne de ditMyAge . Cela signifie qu'en théorie, nous ne devrions pas avoir accès à la variable année . Mais en JavaScript, nos fonctions internes continuent de faire référence à des valeurs créées dans le périmètre dans notre cas, le sayMy .
4. Ensuite, lorsque nous appelons l'âge et passez un argument à celui-ci, il exécute la fonction logAge en référençant et en utilisant la variable de année qui avait déjà été déclarée dans la portée de 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.