Compréhension des portées JavaScript

En JavaScript, les « règles de portée » ou « scopes » désignent les zones du code où les variables peuvent être accessibles ou inaccessibles. Il existe principalement deux types de portée en JavaScript : la portée globale et la portée locale.

La portée globale signifie que la variable est déclarée en dehors de toutes les fonctions et est donc accessible partout dans le script. En revanche, la portée locale signifie que la variable est déclarée à l’intérieur d’une fonction et n’est accessible qu’à l’intérieur de cette fonction.

Par exemple, considérons le code suivant :

javascriptCopy code
var globalVariable = 10;

function myFunction() {
    var localVariable = 20;
    console.log(globalVariable); // accessible
    console.log(localVariable); // accessible
}

myFunction();

console.log(globalVariable); // accessible
console.log(localVariable); // non accessible (erreur)

Dans cet exemple, globalVariable est accessible à la fois à l’intérieur et à l’extérieur de la fonction myFunction, car elle est déclarée globalement. En revanche, localVariable est uniquement accessible à l’intérieur de myFunction, car elle est déclarée localement à cette fonction.

Il est également important de noter que JavaScript a une portée de fonction, ce qui signifie que les variables déclarées à l’intérieur d’une fonction ne sont pas accessibles à l’extérieur de cette fonction. Cependant, les fonctions imbriquées ont accès aux variables déclarées dans leurs fonctions parentes.

javascriptCopy code
function outerFunction() {
    var outerVariable = 'Je suis une variable extérieure';

    function innerFunction() {
        var innerVariable = 'Je suis une variable intérieure';
        console.log(outerVariable); // accessible
    }

    innerFunction();

    console.log(innerVariable); // non accessible (erreur)
}

outerFunction();

Dans cet exemple, outerVariable est accessible à partir de la fonction innerFunction, car elle est déclarée dans la fonction parente outerFunction. Cependant, innerVariable n’est pas accessible à l’extérieur de innerFunction.

Il existe également le concept de « portée de bloc » introduit avec ES6 (ECMAScript 2015) grâce à l’utilisation de let et const. Les variables déclarées avec let et const ont une portée de bloc, ce qui signifie qu’elles sont limitées au bloc dans lequel elles sont déclarées, tel qu’une instruction if, une boucle for, ou un bloc de code {}.

javascriptCopy code
if (true) {
    let blockVariable = 'Je suis une variable de bloc';
    console.log(blockVariable); // accessible
}

console.log(blockVariable); // non accessible (erreur)

Dans cet exemple, blockVariable est uniquement accessible à l’intérieur du bloc if, car elle est déclarée avec let, qui a une portée de bloc.

En résumé, en JavaScript, les variables ont une portée globale ou locale, définie par l’endroit où elles sont déclarées. De plus, avec l’introduction de let et const, il est possible de déclarer des variables avec une portée de bloc, limitant leur accessibilité au bloc dans lequel elles sont déclarées.

En plus des portées de variables en JavaScript, il est essentiel de comprendre le comportement des variables en termes de « hoisting » (hisser). Le hoisting est un comportement par lequel les déclarations de variables (et de fonctions) sont déplacées vers le haut de leur portée respective pendant la phase de compilation, mais les affectations de valeurs ne sont pas hissées.

Considérons cet exemple :

javascriptCopy code
console.log(myVar); // Affiche undefined
var myVar = 10;
console.log(myVar); // Affiche 10

Bien que myVar soit déclarée après la première instruction console.log, il n’y a pas d’erreur. Cela est dû au hoisting, où la déclaration de myVar est hissée vers le haut de la portée, mais l’affectation de valeur reste à sa position d’origine.

Cependant, il est important de noter que le hoisting ne s’applique qu’aux déclarations, pas aux initialisations. Par conséquent, si vous essayez d’accéder à une variable avant qu’elle ne soit déclarée, elle sera évaluée à undefined.

javascriptCopy code
console.log(myVar); // Affiche undefined
var myVar = 10;

Dans cet exemple, bien que myVar soit déclarée plus tard dans le code, elle est hoistée vers le haut de la portée, mais son initialisation reste là où elle est. Donc, lors de la première tentative d’accès à myVar, elle est évaluée à undefined.

Cependant, avec let et const, la situation est légèrement différente. Les variables déclarées avec let ou const ne sont pas initialisées avant leur déclaration dans le code, contrairement à var. Par conséquent, si vous essayez d’accéder à une variable let ou const avant sa déclaration, vous obtiendrez une erreur de référence.

javascriptCopy code
console.log(myVar); // Erreur : Cannot access 'myVar' before initialization
let myVar = 10;

Dans cet exemple, une erreur est déclenchée car myVar est une variable let et n’est pas initialisée avant la tentative d’accès.

En résumé, le hoisting est un comportement en JavaScript où les déclarations de variables (et de fonctions) sont déplacées vers le haut de leur portée respective pendant la phase de compilation. Cela signifie que vous pouvez accéder à une variable même avant sa déclaration, mais elle sera évaluée à undefined si elle est déclarée avec var, ou déclenchera une erreur si elle est déclarée avec let ou const et accédée avant sa déclaration.