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

La

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

Scope	Lexical Scope
Refers to the context in which variables are accessible.	Refers to how the location of variables in the code determines scope.
Can be global, block, or function.	Depends on the structure of the code when it is written.
Dynamic during runtime.	Fixed during code definition.

Portée

---

Portée lexicale

ête> Fait référence au contexte dans lequel les variables sont accessibles. Fait référence à la manière dont l'emplacement des variables dans le code détermine la portée. Peut être global, bloc ou fonction. Dépend de la structure du code au moment de son écriture. Dynamique pendant l'exécution. Corrigé lors de la définition du code.

6. Meilleures pratiques

Utilisez let et const

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

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

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

 : Utilisez toujours let et const pour éviter les variables globales inattendues.

1. 
   

   Réduire les variables globales
 :
2. Les variables globales peuvent conduire à des conflits de noms. Encapsulez le code dans des fonctions ou des modules.

   
   

   Comprendre la portée lexicale
 :

Profitez des fermetures et de la portée lexicale pour écrire un code plus propre et plus efficace.

---

Résumé
• Scope définit où les variables sont accessibles, avec trois types : global, bloc et fonction.
• Portée lexicale
garantit qu'une fonction utilise toujours la portée dans laquelle elle a été définie.

La maîtrise de ces concepts est essentielle pour déboguer et écrire du code JavaScript efficace.

Bonjour, je m'appelle Abhay Singh Kathayat !

Je suis un développeur full-stack avec une expertise dans les technologies front-end et back-end. Je travaille avec une variété de langages et de frameworks de programmation pour créer des applications efficaces, évolutives et conviviales. N'hésitez pas à me contacter à mon e-mail professionnel : kaashshorts28@gmail.com.

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!