Portée de la fonction et portée du bloc

Chaque fois que vous déclarez une variable à l’intérieur d’une fonction, la variable est liée dans la fonction et vous ne pouvez pas y accéder en dehors de la fonction. var est le mot clé pour définir une variable pour l’accessibilité à la portée de la fonction.

Maintenant, vous pourriez demander, si cela donne une erreur même si vous utilisez let ou const, pourquoi seulement var est associé à la portée de la fonction ? La chose est, let et const sont utilisés pour définir la portée du bloc, et avant ES6, JavaScript n’avait pas de portée de bloc ou let et const.

Une portée de bloc est la zone dans if, switch conditions ou for et while boucles. En termes simples , chaque fois que vous voyez des crochets courbes}, il s’agit d’un bloc.

Voyons un exemple :

Maintenant, vous pourriez vous attendre à ce qu’aucune des commandes de journal ne fonctionne mais comme vous pouvez le voir, ce n’est pas le cas avec var, les variables définies avec var à l’intérieur de if, switch conditions ou for et while boucles peuvent être accédées globalement et font partie de la portée globale et donc il est une meilleure pratique d’utiliser let et const avec eux.

Lexical Scope

Enfin, nous avons atteint le véritable objectif de ce post. Bon, j’aurais pu sauter la longue discussion sur la portée, mais personnellement, je ne pense pas que vous puissiez comprendre la portée lexicale sans connaître les composants clés qui tournent autour.

Encore, un point à retenir : Javascript a une portée lexicale avec des fonctions scope.

En termes simples, cela signifie que la portée des enfants a accès aux variables définies dans la portée des parents. Par exemple, si je devais définir une fonction et déclarer une variable à l’intérieur de celle-ci et à l’intérieur de la même fonction, définir une autre fonction, alors je devrais être en mesure d’utiliser cette variable à l’intérieur de la fonction interne en raison de la portée lexicale. Voyons un exemple:

On peut voir dans l’exemple que les variables déclarées dans outerFunction() sont accessibles par innerfunction(), c’est le scoping lexical.

La portée des variables est définie par leur position dans le code. Afin de résoudre les variables, JavaScript commence par la portée la plus intérieure et cherche vers l’extérieur jusqu’à ce qu’il trouve la variable recherchée. Dans l’exemple ci-dessus, Javascript cherche d’abord les variables à l’intérieur de innerFunction() et quand il ne les trouve pas, il va à l’extérieur c’est-à-dire outerFunction()

Le scoping lexical est meilleur car nous pouvons facilement comprendre la valeur d’une variable à partir du code, alors que dans le scoping dynamique, la signification d’une variable peut changer au moment de l’exécution, ce qui la rend complexe à comprendre.

Donc, nous avons réussi à comprendre ce qu’est le scoping lexical, maintenant regardons les closures où le scoping lexical est réellement utilisé.