Maîtriser la portée et la portée lexicale en JavaScript

Portée et portée lexicale en JavaScript

Comprendre la portée et la portée lexicale est fondamentale pour écrire du code JavaScript efficace et sans erreur. Ces concepts dictent la manière dont les variables sont accessibles et où elles sont disponibles dans votre code.

1. Portée en JavaScript

Portée fait référence au contexte actuel d'exécution, qui détermine la visibilité et l'accessibilité des variables. JavaScript a trois types de portée :

A. Portée du bloc

• Les variables déclarées avec let et const ont une portée de bloc, ce qui signifie qu'elles ne sont accessibles que dans le bloc où elles sont définies.
• Introduit dans ES6.

Exemple :

{
  let a = 10;
  const b = 20;
  console.log(a, b); // Output: 10, 20
}
console.log(a); // Error: a is not defined

B. Portée de la fonction

• Les variables déclarées avec var sont de portée fonctionnelle. Ils sont accessibles au sein de l'ensemble de la fonction dans laquelle ils sont déclarés.
• Ne respecte pas les limites des blocs.

Exemple :

function testFunctionScope() {
  if (true) {
    var x = 10; // Function-scoped
  }
  console.log(x); // Output: 10
}
testFunctionScope();

C. Portée mondiale

• Les variables déclarées en dehors de toute fonction ou bloc sont dans la portée globale et accessibles n'importe où dans le programme.

Exemple :

var globalVar = "I am global";
console.log(globalVar); // Output: I am global

2. Portée lexicale

Portée lexicale signifie que la portée d'une variable est déterminée par sa position dans le code source. Les fonctions sont exécutées en utilisant la chaîne de portée qui était en place lorsqu'elles ont été définies, et non lorsqu'elles sont invoquées.

A. Chaîne de portée

La chaîne de portées est une hiérarchie de portées que JavaScript utilise pour résoudre les références de variables. Si une variable n'est pas trouvée dans la portée actuelle, elle recherche dans la portée externe, en continuant jusqu'à ce qu'elle atteigne la portée globale.

Exemple :

function outer() {
  let outerVar = "I'm outer";

  function inner() {
    console.log(outerVar); // Accesses the outer scope
  }

  inner();
}
outer();
// Output: I'm outer

B. Fonctions imbriquées

Les fonctions internes ont accès aux variables dans leurs fonctions externes en raison de la portée lexicale.

Exemple :

function outerFunction() {
  let outerVariable = "Outer";

  function innerFunction() {
    let innerVariable = "Inner";
    console.log(outerVariable); // Outer
    console.log(innerVariable); // Inner
  }

  innerFunction();
}
outerFunction();

3. Exemples pratiques

A. Accès aux variables de portée externe

function createMultiplier(multiplier) {
  return function (value) {
    return value * multiplier; // Accesses 'multiplier' from outer scope
  };
}

const double = createMultiplier(2);
console.log(double(5)); // Output: 10

B. Portée lexicale dans les fermetures

Les fermetures s'appuient sur la portée lexicale pour mémoriser les variables de leur environnement extérieur.

Exemple :

function outerFunction() {
  let count = 0;
  return function () {
    count++;
    console.log(count);
  };
}

const counter = outerFunction();
counter(); // Output: 1
counter(); // Output: 2

4. Erreurs courantes avec Scope

A. Oublier let et const

Les variables déclarées sans let, const ou var deviennent des variables globales.

{
  let a = 10;
  const b = 20;
  console.log(a, b); // Output: 10, 20
}
console.log(a); // Error: a is not defined

B. Bloquer la portée avec var

L'utilisation de var à l'intérieur d'un bloc conduit à des résultats inattendus.

function testFunctionScope() {
  if (true) {
    var x = 10; // Function-scoped
  }
  console.log(x); // Output: 10
}
testFunctionScope();

C. Observation

Une variable déclarée dans une portée imbriquée peut masquer (remplacer) une variable dans la portée externe.

var globalVar = "I am global";
console.log(globalVar); // Output: I am global

5. Différence entre la portée et la portée lexicale

function outer() {
  let outerVar = "I'm outer";

  function inner() {
    console.log(outerVar); // Accesses the outer scope
  }

  inner();
}
outer();
// Output: I'm outer

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!