“Portée en JavaScript : Explications détaillées avec exemples”

En JavaScript, la portée (scope) détermine les parties du code qui peuvent accéder à une variable. La portée est cruciale pour assurer le bon fonctionnement d’un programme et éviter les conflits entre variables. Dans cet article, nous allons explorer en détail le concept de portée en JavaScript et l’expliquer à l’aide de blocs de code.

Portée Globale

La portée globale concerne les variables ou fonctions qui sont accessibles partout dans le code. Les variables globales sont définies en dehors de toute fonction.

var globalVar = "Je suis une variable globale";

function accessGlobalVar() {
    console.log(globalVar); // "Je suis une variable globale"
}

accessGlobalVar();
console.log(globalVar); // "Je suis une variable globale"

Dans l’exemple ci-dessus, la variable globalVar est définie dans la portée globale et peut être utilisée aussi bien à l’intérieur qu’à l’extérieur de la fonction.

Portée Locale

La portée locale concerne les variables qui ne sont accessibles que dans la fonction ou le bloc où elles sont définies.

Portée de Fonction

En JavaScript, les variables définies à l’intérieur d’une fonction ne sont accessibles que dans cette fonction.

function myFunction() {
    var localVar = "Je suis une variable locale";
    console.log(localVar); // "Je suis une variable locale"
}

myFunction();
console.log(localVar); // ReferenceError : localVar n'est pas définie

Dans cet exemple, la variable localVar est définie dans la fonction myFunction et n’est pas accessible en dehors de celle-ci.

Portée de Bloc

Introduits avec ES6, les mots-clés let et const permettent de créer une portée de bloc, valide uniquement à l’intérieur des accolades {}.

if (true) {
    let blockVar = "Je suis une variable de bloc";
    console.log(blockVar); // "Je suis une variable de bloc"
}

console.log(blockVar); // ReferenceError : blockVar n'est pas définie

Dans cet exemple, la variable blockVar est définie à l’intérieur du bloc if et n’est pas accessible en dehors de celui-ci.

Chaîne de Portée (Scope Chain)

La chaîne de portée désigne l’ordre dans lequel JavaScript recherche une variable. Les fonctions imbriquées peuvent accéder aux variables des portées extérieures, mais les portées extérieures ne peuvent pas accéder aux variables définies dans des portées intérieures.

var outerVar = "Je suis une variable extérieure";

function outerFunction() {
    var innerVar = "Je suis une variable intérieure";
    
    function innerFunction() {
        console.log(outerVar); // "Je suis une variable extérieure"
        console.log(innerVar); // "Je suis une variable intérieure"
    }
    
    innerFunction();
}

outerFunction();
console.log(innerVar); // ReferenceError : innerVar n'est pas définie

Dans cet exemple, la fonction innerFunction peut accéder à outerVar et innerVar. Cependant, la variable innerVar n’est pas accessible en dehors de outerFunction.

Portée Lexicale

La portée lexicale détermine la portée d’une fonction en fonction de l’endroit où elle est définie et non de l’endroit où elle est appelée. Cela signifie que JavaScript vérifie la chaîne de portée selon l’emplacement d’écriture de la fonction.

var lexicalVar = "Je suis une variable lexicale";

function lexicalFunction() {
    console.log(lexicalVar); // "Je suis une variable lexicale"
}

function wrapperFunction() {
    var lexicalVar = "Je suis une variable différente";
    lexicalFunction();
}

wrapperFunction();

Dans cet exemple, la fonction lexicalFunction recherche la variable lexicalVar dans la portée globale, car elle y a été définie, et ignore celle définie dans wrapperFunction.

Fermeture (Closure)

Une fermeture est une fonction qui a accès aux variables de son environnement lexical. Elle fonctionne sur la base de la chaîne de portée définie lors de sa création.

function createCounter() {
    let count = 0;
    
    return function() {
        count++;
        return count;
    };
}

const counter = createCounter();
console.log(counter()); // 1
console.log(counter()); // 2
console.log(counter()); // 3

Dans cet exemple, la fonction createCounter retourne une fonction interne qui a accès à la variable count dans son environnement lexical. Chaque appel à counter() met à jour et renvoie la valeur de count.

Conclusion

Comprendre la portée en JavaScript est essentiel pour garantir le bon fonctionnement du code et éviter les conflits de variables. Des concepts tels que la portée globale et locale, la portée de fonction, la portée de bloc, la chaîne de portée, la portée lexicale et les fermetures permettent de réguler la gestion et l’accès aux variables en JavaScript. Ces notions fondamentales sont cruciales pour rendre votre code plus lisible et maintenable.