Quelle est la portée des variables en JavaScript ?

Quelle est la portée des variables en javascript ? Ont-ils la même portée à l'intérieur qu'à l'extérieur d'une fonction ? Ou est-ce même important? De plus, où sont stockées les variables si elles sont définies globalement ?

Solution du problème

TLDR

JavaScript a une portée et des fermetures lexicales (également appelées statiques). Cela signifie que vous pouvez déterminer la portée d'un identifiant en consultant le code source.

Les quatre périmètres sont:

Global - visible par tout

Fonction - visible dans une fonction (et ses sous-fonctions et blocs)

Bloc - visible dans un bloc (et ses sous-blocs)

Module - visible dans un module

En dehors des cas particuliers de portée globale et de module, les variables sont déclarées à l'aide de var(portée de la fonction), let(portée du bloc) et const(portée du bloc). La plupart des autres formes de déclaration d'identifiant ont une portée de bloc en mode strict.

Aperçu

La portée est la région de la base de code sur laquelle un identifiant est valide.

Un environnement lexical est une correspondance entre les noms d'identificateurs et les valeurs qui leur sont associées.

La portée est formée d'une imbrication liée d'environnements lexicaux, chaque niveau de l'imbrication correspondant à un environnement lexical d'un contexte d'exécution ancêtre.

Ces environnements lexicaux liés forment une « chaîne » de portée. La résolution d'identifiant est le processus de recherche le long de cette chaîne d'un identifiant correspondant.

La résolution de l'identifiant ne se produit que dans un sens : vers l'extérieur. De cette façon, les environnements lexicaux externes ne peuvent pas "voir" dans les environnements lexicaux internes.

Il existe trois facteurs pertinents pour décider de la portée d'un identifiant en JavaScript :

Comment un identifiant a été déclaré

Où un identifiant a été déclaré

Que vous soyez en mode strict ou en mode non strict

Certaines des façons dont les identifiants peuvent être déclarés :

var, letetconst

Paramètres de fonction

Paramètre de bloc catch

Déclarations de fonction

Expressions de fonction nommées

Propriétés définies implicitement sur l'objet global (c'est-à-dire, manquantes varen mode non strict)

importdéclarations

eval

Certains des identifiants de lieux peuvent être déclarés :

Contexte mondial

Corps de fonction

Bloc ordinaire

Le sommet d'une structure de contrôle (par exemple, boucle, si, tandis que, etc.)

Organe de la structure de contrôle

Modules

Styles de déclaration

a été

Les identifiants déclarés à l'aide var de ont une portée de fonction, sauf lorsqu'ils sont déclarés directement dans le contexte global, auquel cas ils sont ajoutés en tant que propriétés sur l'objet global et ont une portée globale. Il existe des règles distinctes pour leur utilisation dans evalles fonctions.

laisser et const

Les identifiants déclarés à l'aide de letet const ont une portée de bloc, sauf lorsqu'ils sont déclarés directement dans le contexte global, auquel cas ils ont une portée globale.

Remarque: let, constet var sont tous hissés. Cela signifie que leur position logique de définition est le sommet de leur portée englobante (bloc ou fonction). Cependant, les variables déclarées à l'aide de letet constne peuvent pas être lues ou affectées tant que control n'a pas dépassé le point de déclaration dans le code source. La période intermédiaire est connue sous le nom de zone morte temporelle.

function f() {
 function g() {
 console.log(x)
 }
 let x = 1
 g()
}
f() // 1 because x is hoisted even though declared with `let`!