Les Portées Lexicales des Fonctions en JavaScript

Les portées lexicales, ou « lexical scoping » en anglais, jouent un rôle fondamental dans la manière dont les variables sont accessibles et manipulées dans une fonction en JavaScript.

Ce concept vous permettra de mieux comprendre le comportement des variables dans vos programmes et d’écrire du code performant.

Qu’est-ce que la portée lexicale ?

La portée lexicale désigne la manière dont les variables sont accessibles en fonction de leur position dans le code source.

En JavaScript, les variables sont accessibles dans la portée où elles sont déclarées et dans toutes les portées imbriquées. Cette portée est déterminée lors de la phase de compilation, c’est-à-dire avant que le code ne s’exécute.

C’est comprendre comment les variables et les fonctions interagissent en fonction de leur position dans le script.

Cette interaction est dictée par la façon dont les variables sont définies et accessibles dans différentes parties du programme, en particulier à l’intérieur des fonctions.

La portée lexicale se réfère à la capacité d’une fonction à accéder aux variables qui sont définies dans sa propre portée, ainsi que dans les portées englobantes, c’est-à-dire les portées dans lesquelles la fonction a été créée.

 En d’autres termes, l’endroit où vous définissez une variable dans votre code détermine où elle peut être utilisée.

Exemple 1 : Portée Lexicale de Base

Voyons comment cela fonctionne avec un exemple simple.

function sayHello() {
  let message = "Bonjour, le monde!";

  function printMessage() {
    console.log(message); // Accède à la variable message
  }

  printMessage();
}

sayHello(); // Affiche Bonjour, le monde!

function maFonction() {
  let variableExterieure = 'Je suis extérieure';

  function fonctionInterne() {
    console.log(variableExterieure); // Cette ligne affiche 'Je suis extérieure'
  }

  fonctionInterne();
}

maFonction();

Autre Exemple de Base de Portée Lexicale

Imaginez un scénario simple où nous avons une fonction interne accédant à une variable définie dans sa fonction parente.

function parentFunction() {
  let parentVariable = 'Je suis dans la fonction parente';

  function childFunction() {
    console.log(parentVariable); // Accès à parentVariable
  }

  childFunction();
}

parentFunction(); // Affiche Je suis dans la fonction parente

function outerFunction() {
  let outerVariable = 'Variable extérieure';

  function middleFunction() {
    let middleVariable = 'Variable intermédiaire';

    function innerFunction() {
      console.log(outerVariable); // Accède à outerVariable
      console.log(middleVariable); // Accède à middleVariable
    }

    return innerFunction;
  }

  return middleFunction;
}

const middle = outerFunction(); // middleFunction est maintenant assignée à middle
const inner = middle(); // innerFunction est maintenant assignée à inner
inner(); // Appelle innerFunction

 
// dans la console
Variable extérieure
Variable intermédiaire

Ce qu’il faut retenir :