Comment fonctionne la portée en JavaScript

"Portée" fait référence au contexte d'exécution actuel dans lequel votre code peut référencer ou "voir" des valeurs et des expressions. Les variables, les objets et les fonctions de différentes parties du code sont accessibles en fonction de leurs portées.

En JavaScript, les variables, les objets et les fonctions peuvent avoir une portée globale, une portée de module, une portée de bloc ou une portée de fonction.

Portée globale en JavaScript

Toute valeur déclarée en dehors d'une fonction ou d'un bloc dans un script a une portée globale et tout autre fichier de script de votre programme peut y accéder.

Par exemple, déclarer une variable globale dans un fichier :

// index.js
laissezVariableglobale = "une certaine valeur"

Signifie que tout autre script de votre programme peut y accéder :

// autreScript.js
console.log (variable globale) // une valeur

Déclarer des variables JavaScript dans la portée globale est une mauvaise pratique car elle peut entraîner une pollution de l'espace de noms. L'espace de noms global est l'espace supérieur de Javascript qui contient les variables, les objets et les fonctions. Dans un navigateur, il s'attache au

Fenêtre objet, tandis que NodeJS utilise un objet nommé global.

La pollution de l'espace de noms global peut entraîner une collision de noms. Il s'agit d'une situation dans laquelle votre code essaie d'utiliser le même nom de variable pour différentes choses dans le même espace de noms. Les collisions de noms sont souvent rencontrées dans les grands projets qui utilisent plusieurs bibliothèques tierces.

Portée des modules

Un module est un fichier autonome qui encapsule et exporte des morceaux de code que d'autres modules d'un projet peuvent utiliser. Il vous permet d'organiser et de maintenir votre base de code plus efficacement.

Modules ES formalisés le modèle de module JavaScript en JavaScript en 2015.

Les variables que vous déclarez dans un module sont limitées à ce module, ce qui signifie qu'aucune autre partie du programme ne peut y accéder.

Vous ne pouvez utiliser une variable déclarée dans un module en dehors de celui-ci que si le module exporte cette variable en utilisant le exporter mot-clé. Vous pouvez ensuite importer ce nom dans un autre module en utilisant le importer mot-clé.

Voici un exemple qui montre l'exportation d'une classe :

// index.js
exporterclasserFoo{
constructeur(propriété_1, propriété_2) {
cette.propriété_1 = propriété_1
cette.propriété_2 = propriété_2
 }
}

Et voici comment vous pouvez importer ce module et utiliser la propriété qu'il exporte :

// unModule.js
importer { Foo } de './index.js'
const bar = nouveau Foo('fou', 'bar')
console.log (bar.property_1) // truc

Les fichiers ne sont pas déclarés comme modules par défaut en JavaScript.

En JavaScript côté client, vous pouvez déclarer un script en tant que module en définissant le taper attribuer à module sur le scénario étiquette:

<type de script="module" source="index.js"></script>

Dans NodeJS, vous pouvez déclarer un script en tant que module en définissant le taper propriété à module dans ton package.json dossier:

{
"taper": "module"
}

Portée du bloc

Un bloc en JavaScript est l'endroit où une paire d'accolades commence et se termine.

Variables déclarées dans un bloc avec la laisser, et constante les mots-clés sont limités à ce bloc, ce qui signifie que vous ne pouvez pas y accéder en dehors de celui-ci. Cette portée ne s'applique pas aux variables déclarées à l'aide de la var mot-clé:

{ // Début du bloc
 const un = '1'
 soit deux = '2'
 var trois = '3'
} // Fin de bloc
console.log (un) // génère une erreur
console.log (trois) // "3"

Les variables incluses dans le bloc ci-dessus et déclarées comme const ou let ne sont accessibles qu'à l'intérieur du bloc. Cependant, vous pouvez accéder à la variable déclarée à l'aide de la var mot clé en dehors du bloc.

Portée de la fonction

Les variables déclarées à l'intérieur d'une fonction sont communément appelées variables locales et sont limitées à la fonction. Vous ne pouvez pas y accéder en dehors de la fonction. Cette portée s'applique aux variables déclarées avec le var, laisser, et constante mots clés.

Comme les variables déclarées dans une fonction sont locales à la fonction, les noms des variables peuvent être réutilisés. La réutilisation des noms de variables à portée de fonction est connue sous le nom d'occultation de variable, et la variable externe est dite « masquée ».

Par exemple:

fonctionmultiplier() {
laisser un = 1
var deux = 2
constante trois = 3
revenir un deux trois
}
// Ombre variable
constante trois = 'trois' // Ne génère pas d'erreur

Une compréhension des règles de portée est essentielle

Avoir une compréhension des portées disponibles en JavaScript vous permet d'éviter plus facilement les erreurs. Essayer d'accéder à une variable qui n'est pas disponible dans une portée particulière est une source mûre de bogues.

Une compréhension de la portée implique également des concepts tels que la pollution globale de l'espace de noms, ce qui peut rendre votre code plus sujet aux bogues.