Portée des variables

Comme vous l'avez remarqué dans l'article sur les variables, nous avons la possibilité de déclarer des variables de trois façons, avec var, let et const.

Une différence existe entre ces mots clés, au-delà du fait que l'une d'entre elle ne permet pas la modification de sa valeur const. Ici, il s'agit de la portée des variables ou autrement dit, du scope des variables.

Portée globale

Une variable déclarée en dehors d'une fonction sera globale, c'est-à-dire accessible partout dans le script, même dans une fonction JavaScript.

var toto = 'Hello';

function Demo() {
    console.log(toto);
}

Demo(); // Résultat : Hello
console.log(toto); // Résultat : Hello

La variable toto est bien opérationnel dans la fonction Demo().

Portée locale

À l'inverse, une variable déclarée au sein d'une fonction à une portée de bloc ou locale. Elle ne sera accessible qu'à l'intérieur de cette même fonction.

function Demo() {
    var toto = 'Hello';
    console.log(toto);
}

Demo(); // Résultat : Hello
console.log(toto); // ERREUR

Réaffecter une variable

Une variable globale peut être redéfinie dans une fonction sans aucun souci.

var toto = 'Welcome !';

function Demo() {
    toto = 'Hello';
    console.log(toto);
}

Demo(); // Résultat : Hello
console.log(toto); // Résultat : Hello

Conseil

À la déclaration d'une variable, privilégiez d'abord const si sa valeur n'a pas besoin d'être réaffectée. Ensuite let et enfin var, bien que var n'est plus utile aujourd'hui et let fais parfaitement l'affaire depuis son apparition en ECMAScript 2015.