Scopes et levage en JavaScript - Explication complète

Portées en JavaScript

La portée en JavaScript désigne la zone de votre code où certaines variables ou fonctions peuvent être utilisées ou vues. Il définit où vous avez accès à des valeurs ou des actions spécifiques. Il existe principalement deux types de portée en JavaScript :

1. Portée mondiale

2. Portée locale (portée des fonctions et des blocs)

Portée mondiale

Lorsqu'une variable est déclarée en dehors de toute fonction ou bloc, elle fait partie de la portée globale. Il est accessible de n'importe où dans le code.

let globalVar = "I'm global";

function printGlobalVar() {
  console.log(globalVar); // Accessible here
}

printGlobalVar(); // Output: I'm global
console.log(globalVar); // Output: I'm global

Dans cet exemple, globalVar est déclaré en dehors de toute fonction, ce qui en fait une variable globale. Cela signifie qu'il est accessible n'importe où dans le code, à la fois à l'intérieur et à l'extérieur des fonctions. Lorsque la fonction printGlobalVar() est appelée, elle enregistre la valeur de globalVar car la fonction peut accéder à la portée globale. Après cela, lorsque nous enregistrons globalVar directement en dehors de la fonction, elle imprime toujours la même valeur car elle est disponible dans tout le programme en tant que variable globale. Essentiellement, la portée globale permet d'utiliser et d'accéder à cette variable n'importe où dans le code.

Portée locale (portée des fonctions et des blocs)

Les variables définies dans des fonctions ou des blocs (comme des boucles ou des instructions if) sont confinées à cette fonction ou ce bloc. Ils ne sont pas accessibles en dehors de ce périmètre.

Portée de la fonction : Les variables déclarées à l'intérieur d'une fonction ne sont accessibles qu'à l'intérieur de cette fonction.

function myFunction() {
  let localVar = "I'm local";
  console.log(localVar); // Output: I'm local
}

myFunction();
console.log(localVar); // Error: localVar is not defined

Portée du bloc : introduite avec let et const, la portée du bloc s'applique aux variables déclarées à l'intérieur d'un bloc ({}), telles que les boucles, les conditions et les blocs try-catch. Ces variables ne sont accessibles que dans ce bloc.

if (true) {
  let blockVar = "I'm block scoped";
  console.log(blockVar); // Output: I'm block scoped
}

console.log(blockVar); // Error: blockVar is not defined

En revanche, les variables déclarées avec var sont de portée fonctionnelle, ce qui signifie qu'elles sont hissées en haut de la fonction ou globalement, même si elles sont déclarées dans un bloc.

Levage en JavaScript

Le levage est le comportement par défaut de JavaScript consistant à déplacer les déclarations vers le haut de leur portée pendant la phase de compilation. Cela signifie que les variables et les déclarations de fonctions sont traitées avant l'exécution de tout code.

Levage de variables

Dans le cas de déclarations de variables utilisant var, la variable est hissée, mais son initialisation ne l'est pas. Cela conduit au fameux comportement « non défini » si vous essayez d'accéder à une variable avant qu'elle ne soit initialisée.

console.log(myVar); // Output: undefined
var myVar = "Hello";
console.log(myVar); // Output: Hello

En coulisses, le moteur JavaScript fait ceci :

var myVar;
console.log(myVar); // Output: undefined
myVar = "Hello";
console.log(myVar); // Output: Hello

Dans cet exemple, JavaScript hisse la déclaration var myVar en haut, de sorte que le code se comporte comme s'il était écrit en haut. Le premier console.log affiche undefined car la variable est déclarée (histée) mais aucune valeur n'a encore été attribuée. Après l'affectation, le deuxième console.log génère 5. Cela montre comment le levage fonctionne avec var : la déclaration est levée, mais la valeur est attribuée plus tard.

Pour let et const, pendant que la déclaration est levée, ils ne sont pas initialisés jusqu'à ce que le code atteigne cette ligne, et essayer d'y accéder avant la déclaration conduit à une ReferenceError.

console.log(myLet); // ReferenceError: Cannot access 'myLet' before initialization
let myLet = "Hello";

Levage des fonctions

Les déclarations de fonctions sont entièrement hissées, ce qui signifie que vous pouvez appeler une fonction avant sa déclaration.

greet(); // Output: Hello, World!

function greet() {
  console.log("Hello, World!");
}

La fonction est déplacée vers le haut, elle peut donc être appelée avant la déclaration.

Cependant, les expressions de fonction utilisant var, let ou const ne sont pas hissées de la même manière que les déclarations de fonction. Elles se comportent comme des variables régulières en termes de levage, ce qui signifie que la fonction n'est disponible qu'après l'affectation.

greet(); // Error: greet is not a function

var greet = function() {
  console.log("Hello!");
};

Dans l'exemple ci-dessus, greet est hissé en tant que variable var mais est initialement indéfini, donc essayer de l'appeler avant l'affectation entraîne une erreur.

Portée et levage en pratique

Les variables

• Portée globale sont accessibles tout au long du script.

Les variables

• Portée locale sont confinées au bloc ou à la fonction où elles sont déclarées.

• Hoisting vous permet d'utiliser des fonctions et des variables avant leur déclaration, mais avec des limitations pour les expressions let, const et function.

Ces concepts sont fondamentaux pour comprendre le comportement des variables et des fonctions en JavaScript, et leur maîtrise est essentielle pour écrire du code clair et sans bug.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!