Pour afficher l’article en anglais, activez la case d’option Anglais. Vous pouvez aussi afficher la version anglaise dans une fenêtre contextuelle en faisant glisser le pointeur de la souris sur le texte.
Traduction
Anglais

Portée des variables (JavaScript)

 

JavaScript a deux types de portées : globale et locale.  Si vous déclarez une variable en dehors d'une définition de fonction, il s'agit d'une variable globale et sa valeur est accessible et modifiable dans tout le programme.  En revanche, si vous déclarez une variable au sein d'une définition de fonction, il s'agit d'une variable locale.  Elle est créée et détruite chaque fois que la fonction est exécutée ; en dehors de cette fonction, aucun code ne peut y accéder.  JavaScript ne prend pas en charge la portée de bloc (un ensemble d'accolades {. . .} définissant une nouvelle portée), sauf dans le cas particulier de variables ayant une portée de bloc.  

Une variable locale peut posséder le même nom qu'une variable globale, mais elle est entièrement dissociée de celle-ci. La modification de la valeur d'une variable n'a aucun effet sur l'autre variable.  Seule la version locale est significative au sein de la fonction dans laquelle elle est déclarée.  

// Global definition of aCentaur.
var aCentaur = "a horse with rider,";

// A local aCentaur variable is declared in this function.
function antiquities(){

   var aCentaur = "A centaur is probably a mounted Scythian warrior";
}

antiquities();
aCentaur += " as seen from a distance by a naive innocent.";

document.write(aCentaur);

// Output: "a horse with rider, as seen from a distance by a naive innocent."

Dans JavaScript, les variables sont évaluées comme si elles étaient déclarées au début de la portée dans laquelle elles existent.  Cela provoque parfois des résultats inattendus, comme illustré ici.  

var aNumber = 100;
tweak();

function tweak(){

    // This prints "undefined", because aNumber is also defined locally below.
    document.write(aNumber);

    if (false)
    {
        var aNumber = 123;  
    }
}

Lorsque JavaScript exécute une fonction, il recherche d'abord toutes les déclarations de variable, par exemple var someVariable;.  Il crée les variables avec la valeur initiale undefined.  Si une variable est déclarée avec une valeur, par exemple var someVariable = "something";, sa valeur initiale reste undefined. Elle adopte la valeur déclarée uniquement à partir du moment où la ligne contenant la déclaration est exécutée.  

JavaScript traite toutes les déclarations de variables avant d'exécuter du code, que la déclaration se trouve ou non à l'intérieur d'un bloc conditionnel ou de toute autre construction.  Après avoir trouvé toutes les variables, JavaScript exécute le code dans la fonction.  Si une variable est implicitement déclarée à l'intérieur d'une fonction, autrement dit, si elle apparaît à gauche d'une expression d'assignation mais qu'elle est déclarée sans le mot clé var, elle est créée en tant que variable globale.  

Dans JavaScript, une fonction (imbriquée) interne enregistre les références aux variables locales présentes dans la même portée que la fonction elle-même, même si la fonction retourne.  Cet ensemble de références est appelé fermeture.  Dans l'exemple suivant, le deuxième appel à la fonction interne affiche le même message (« Hello Bill ») que le premier appel, car le paramètre d'entrée pour la fonction externe, name, est une variable locale stockée dans la fermeture de la fonction interne.  

function send(name) {
    // Local variable 'name' is stored in the closure
    // for the inner function.
    return function () {
        sendHi(name);
    }
}

function sendHi(msg) {
    console.log('Hello ' + msg);
}

var func = send('Bill');
func();
// Output:
// Hello Bill
sendHi('Pete');
// Output:
// Hello Pete
func();
// Output:
// Hello Bill

Internet Explorer 11 propose la prise en charge de let et de const, qui sont des variables ayant une portée de bloc.  Pour ces variables, les accolades {. . .} définissent une nouvelle portée.  Lorsque vous affectez l'une de ces variables à une valeur particulière, la valeur s'applique uniquement à la portée dans laquelle elle est définie.  

L'exemple suivant illustre l'utilisation de let et de la portée de bloc.

System_CAPS_noteRemarque

Le code suivant est pris en charge dans les mode standard d'Internet Explorer 11 et versions ultérieures.

let x = 10;
var y = 10;
{
    let x = 5;
    var y = 5;
    {
        let x = 2;
        var y = 2;
        document.write("x: " + x + "<br/>");
        document.write("y: " + y + "<br/>");
        // Output:
        // x: 2
        // y: 2
    }
    document.write("x: " + x + "<br/>");
    document.write("y: " + y + "<br/>");
    // Output:
    // x: 5
    // y: 2
}

document.write("x: " + x + "<br/>");
document.write("y: " + y + "<br/>");
// Output:
// x: 10
// y: 2
Afficher: