En écrivant un article sur les fermetures et IIFE il y a quelques jours. J’essayais d’expliquer la portée lexicale de manière courte et simple. J’ai remarqué que l’article devenait de plus en plus gros, j’ai donc décidé d’écrire séparément sur la portée lexicale.
Dans cet article, j’essaierais d’expliquer les bases de la portée lexicale, ce que cela signifie et de donner des exemples pour vous aider à comprendre comment cela fonctionne en JavaScript. Pas de mots à la mode…Je le promets.

Tout d’abord, décomposons le mot « Portée lexicale ».

portée

Nous parlerons d’abord de la plus facile: portée.
En clair, scope peut signifier:

• Une limite
• Une région
• Un environnement

Ou tout autre synonyme auquel vous pourriez penser.

Vous souvenez-vous d’avoir regardé un tutoriel où l’instructeur vous dit qu’une certaine idée / sujet dépasse le cadre de la vidéo?
Ou lorsqu’une équipe d’un autre département travaille sur un projet et que vous leur dites d’ajouter une fonctionnalité que vous jugez cool et qu’ils vous disent: « Cela dépasse le cadre de ce projet ».
Eh bien, je pense que vous comprenez l’essentiel. La portée est simplement une région où quelque chose est autorisé à fonctionner à une période donnée.

En informatique, cela pourrait signifier une région où certaines données existent et sont accessibles. Ces données pourraient ressembler à une variable.

Dans un langage comme JavaScript, nous pourrions définir une portée en créant un bloc en utilisant des accolades : {...}. Nous appelons cette portée de bloc. Cela signifie que les variables déclarées dans ce bloc ne sont accessibles que dans cette région. Cette région couvre tout ce qui s’y trouve, y compris les autres blocs enfants/internes créés dans cette région.
En d’autres termes, cette région est local et ses variables ne sont pas directement accessibles depuis le monde extérieur. Cela pourrait donc être appelé une portée locale.
Les variables déclarées à l’intérieur des fonctions sont dans la portée locale de la fonction.

function doSomething() { let name = "john"; console.log(name)}doSomething(); // Prints 'john'// would produce a Reference error// because name is local to doSomething() function's scopeconsole.log(name); 

Maintenant, vous avez peut-être déjà entendu parler de la portée globale. Eh bien, c’est un environnement qui n’est pas enfermé dans un bloc. Chaque code de votre environnement Javascript y a accès. C’est l’environnement JavaScript ouvert. Le code ci-dessous devrait donc fonctionner.

let name = "john"; // In the global scopefunction doSomething() { name = "James" console.log(name); // The function can access the global scope variable 'name'}doSomething(); // Prints "James"console.log(name); // Can access 'name' too

Une chose à noter:

Une portée a accès à sa portée parent mais la portée parent n’a pas d’accès direct aux variables déclarées dans une portée interne.

La fonction a accès à name car la fonction est déclarée dans la portée globale et name existe dans la portée globale. Si name a été déclaré dans la fonction doSomething(), le code de la portée globale ne peut pas modifier directement la valeur de name car name est local à la fonction.

Je crois que vous avez une bonne compréhension de ce que signifie la portée. Cela signifie simplement une région ou un environnement où une variable existe et peut être consultée ou modifiée.

Maintenant, parlons de « Lexical »

Lexical

Pour comprendre lexical, regardons d’abord le mot dont il est dérivé: Lexicon.
Lexique a été dérivé du mot latin: « lexis » qui signifie « mot »
En anglais simple:

Lexicon signifie simplement un dictionnaire. Dans les mots d’ordre, cela signifie un vocabulaire de la langue d’une personne. C’est comme un livre où le sens / la définition des mots sont stockés.

Chaque fois que vous voulez trouver le sens d’un mot, vous allez dans le lexique.
Vous ne regardez pas où le mot est utilisé et devinez ce qu’il signifie et son contenu ou sa valeur. Vous allez toujours dans le lexique, où le but du mot est créé et clairement défini.

Maintenant avec cette explication:

Lexical signifie simplement quelque chose lié au lexique. En d’autres termes, cela signifie quelque chose lié aux mots ou au vocabulaire de la langue d’une personne. Quelque chose lié à la création ou à la définition des mots.

Parlons de la portée lexicale.

Portée lexicale

Nous avons vu la signification des deux mots en anglais simple.
Avec cette connaissance, définissons la portée lexicale en anglais simple:

La portée lexicale signifie simplement que la région dans laquelle un mot existe est déterminée par l’endroit où il a été défini ou créé.

D’autres définitions seraient:

La portée lexicale signifie que la signification / valeur d’un mot ne peut être déterminée que par la région / l’environnement où il a été créé.

La portée lexicale signifie que vous n’externalisez pas directement la signification d’un mot à des personnes d’une région extérieure qui l’utilise. En effet, lexical met l’accent sur l’origine sur l’endroit où elle a été créée / définie.

D’accord, je vais donner un exemple.
Utilisons le mot: « Danse ».
Le mot « danse » a été créé / défini en Grande-Bretagne. Le peuple britannique connaît sa signification. Ce mot existe dans la portée dans laquelle il a été créé: « Grande-Bretagne ». Le Pays de Galles est en Grande-Bretagne, donc le pays de Galles a accès à ce mot (rappelez-vous que nous avons déjà expliqué pourquoi ci-dessus). Ainsi, le peuple gallois peut mettre à jour la signification de ce mot en fonction de son dialecte local. C’est parce qu’ils sont dans le champ d’application de la Grande-Bretagne.

Les Allemands ne peuvent pas directement venir changer le sens de ce mot. C’est parce que le mot n’a pas été créé en Allemagne. Donc, si les Allemands voulaient utiliser le mot anglais: « dance » et que ce mot n’a pas encore été créé par la Grande-Bretagne, ce mot ne serait pas disponible, peu importe leurs efforts. Cela ferait que personne ne connaîtrait la signification réelle de ce mot en Allemagne car le mot n’existe pas dans le lexique britannique. (Ne vous inquiétez pas si cela semble du charabia, je vous expliquerai avec du code plus tard)

Puisque nous sommes des étudiants en sciences et non des linguistes, remplaçons « word » par « variable ».

Notre nouvelle définition serait:

La portée lexicale signifie simplement que la région dans laquelle une variable existe est déterminée par l’endroit où elle a été définie ou créée.

La portée lexicale signifie que la signification / valeur d’une variable ne peut être déterminée que par la région /l’environnement où elle a été créée.

La portée lexicale signifie que vous n’externalisez pas directement la signification d’une variable pour coder à partir d’une région extérieure (bloc) qui utilise la variable. En effet, lexical met l’accent sur l’origine sur l’endroit où la variable a été créée / définie.

Donc, ce que la portée lexicale nous montre, c’est qu’une variable ne peut être utilisée que dans la portée dans laquelle elle a été créée et non à l’endroit où elle a été appelée.

Voyons comment cela fonctionne dans le code:

function rideBritishBoat() { let boatName = "Queen's Dab"; // local variable return `Driving ${boatName}`}function rideGermanBoat() { const status = rideBritishBoat(); return status;}rideGermanBoat();

L’exemple ci-dessus simule un scénario où les Allemands ont acheté un bateau à la Grande-Bretagne….(Vous pouvez l’échanger quel que soit votre pays want…no j’ai besoin de me battre pour ne pas mentionner un autre pays. Ce ne sont que des noms de pays et non des bibliothèques JavaScript 😛).
Le rideGermanBoat() utilise le rideBritishBoat().
Puisque JavaScript utilise la portée lexicale, lors de l’exécution de la fonction rideBritishBoat(), il se rend à l’endroit où il a été créé et obtient la référence de la variable : boatName. Ainsi, avec la portée lexicale, chaque fois que rideBritishBoat() est exécuté, JavaScript entre dans la portée de la fonction pour rechercher les variables utilisées dans cette fonction.

Remarque: La portée de la fonction rideBritishBoat() est sa portée locale et la portée globale. La fonction rideGermanBoat() n’est pas dans la portée lexicale de la fonction rideBritishBoat() car rideBritishBoat() n’a pas été créée à l’intérieur.

Maintenant, changeons un peu l’exemple:

function rideBritishBoat() { return `Driving ${boatName}`; // Reference Error: boatName not defined}function rideGermanBoat() { let boatName = "Merkel's Dab"; const status = rideBritishBoat(); return status;}rideGermanBoat();

Le code ci-dessus échoue. Les fonctions rideBritishBoat() ne sont pas précises. Il échoue lorsque vous essayez d’accéder à boatName dans l’instruction return.

Pourquoi?

C’est parce que JavaScript utilise la portée lexicale.
Comment cela fonctionne lorsqu’il rencontre une variable boatName à l’intérieur de la fonction rideBritishBoat(), il cherche où la variable boatName a été créée dans sa chaîne de portée. C’est-à-dire toute la portée possible de cette fonction qui est la portée locale de la fonction, puis elle vérifie sa portée englobante dans ce cas la portée globale.

C’est ainsi que JavaScript vérifie les variables. Il vérifie d’abord le bloc local dans lequel la variable actuelle est utilisée pour savoir si elle y a été déclarée. Si ce n’était pas le cas, alors il monte à la portée englobante et continue s’il ne trouve pas de déclaration jusqu’à ce qu’il atteigne le sommet de la chaîne qui est la portée globale

Il existe un autre type de portée appelé « Portée dynamique ».
Le code précédent fonctionnerait dans un langage qui prend en charge la portée dynamique (par exemple Lisp).
En effet, dans un environnement à portée dynamique, la variable est vérifiée au moment de l’exécution. Cela signifie que lorsque vous exécutez rideGermanBoat() et que l’exécution arrive à rideBritishBoat() l’environnement d’exécution vérifie la valeur de boatName où le code est en cours d’exécution. Dans ce cas, il le trouve, donc pas de problème et le code fonctionne à l’attendu et imprime Driving Merkel's Dab.

La portée lexicale est également appelée portée statique car elle est déterminée au moment de la compilation. Ce qui signifie que son environnement / sa portée est fixe et ne peut pas simplement changer. En d’autres termes, les variables ne peuvent être appelées que depuis le bloc de code dans lequel elles ont été déclarées / créées.

La portée dynamique est appelée dynamique car son environnement (portée externe) peut changer. En d’autres termes, les variables peuvent être appelées depuis l’extérieur du bloc dans lequel elles sont créées.

Nous pourrions donc avoir une autre fonction qui utilise le rideBritishBoat() appelé rideMauritianBoat():

function rideMauritianBoat() { let boatName = "Flying Dodo's Dab"; const status = rideBritishBoat(); return status;}rideMauritianBoat();

Dans un langage à portée dynamique, vous pouvez voir que la valeur de la variable boatName à l’intérieur de rideBritishBoat() dépend de la portée dans laquelle elle est exécutée. Comme nous pouvons voir que cette portée peut changer, elle est donc dynamique.
Donc, à l’intérieur de rideBritishBoat(), il appelle la variable boatName de rideMauritianBoat() qui est en dehors de sa portée de bloc.

C’est la portée dynamique et la portée lexicale est le contraire.

Mais rappelez-vous, JavaScript n’est pas dynamiquement étendu. C’est juste pour vous montrer la différence.

Donc, la portée lexicale vérifie les variables au moment de la compilation (les variables doivent être créées et accessibles dans la portée / le bloc utilisé) tandis que la portée dynamique vérifie les variables au moment de l’exécution (les variables peuvent ne pas être créées dans la portée lors de la compilation mais peuvent être présentes lorsque la fonction est en cours d’exécution).

Les développeurs seniors sont comme: Mec!! JavaScript n’est pas un langage compilé !!
S’il vous plait, laissons cette discussion pour un autre jour. Essaie juste d’obtenir le message que je passe.
D’accord, je suis énervé en ce moment. Voici un exercice pour vous.

Exercice rapide

Quelle serait la sortie de cette fonction?

function rideBritishBoat() { let boatName = "Queen's Dab"; function rideWelshBoat() { boatName = "Welsh Royal Boat"; console.log(boatName) } rideWelshBoat();}rideBritishBoat()

Résumé

Le but de cet article était d’expliquer la portée lexicale de manière simple en utilisant une grammaire de base et de courts exemples. Si vous avez remarqué que certains mots sont en gras. Ce sont les mots clés pour comprendre ce concept. De plus, j’ai beaucoup de définitions alternatives des mêmes concepts. Cela a été fait pour que vous choisissiez celui qui s’enfonce facilement pour vous. Des traits différents pour des gens différents

D’après ce que nous avons appris ci-dessus, nous pouvons dire que:

• Une portée est un environnement/région dans lequel quelque chose (une variable) existe
• Une portée peut accéder à ses parents.
• Une portée parent n’a pas d’accès direct aux variables déclarées dans une portée interne.
• Lexical a un rapport avec l’endroit où une variable a été déclarée/ créée.
• La portée lexicale applique la recherche de variables à partir de la portée /du bloc dans lequel elles ont été créées / déclarées et non de l’environnement dans lequel elles s’exécutent.
• La portée dynamique est l’opposé de la portée lexicale.
• La portée dynamique vérifie les variables d’où elles s’exécutent.

Merci d’avoir lu.
A bientôt dans le prochain post.