ES6 : les variables

image_pdfimage_print

La portée des variables en JavaScript peut surprendre lorsqu’on est habitué à d’autres langages. Dans ce chapitre on va faire un peu le point en montrant ce qu’apporte ES6 à ce niveau avec l’introduction des mots-clés let et const.

Déclaration avec “var”

Portée des variables

Avec ES5 on dispose du mot-clé var pour déclarer les variables. Selon où on fait la déclaration la variable n’a pas la même portée :

  • déclaration en dehors d’une fonction : portée globale, donc disponible partout,

  • déclaration dans une fonction : portée locale donc disponible uniquement dans la fonction.

Jusque là tout semble pour le mieux dans le meilleur des mondes informatiques mais…

Si on déclare une variable dans une instruction de bloc elle reste disponible en dehors de ce bloc :

function setAge(age) {
    if (age > 18) {
        var adult = true;
    }
    console.log(adult);	
}
setAge(22)

Si vous exécutez le code ci-dessus vous allez obtenir ce résultat :

true

Autrement dit la variable adult définie dans le bloc reste disponible en dehors de ce bloc.

La portée va même sans doute plus loin pour une portée globale que vous ne le pensez parce que la variable est accessible dans l’objet global qui est window pour une page web :

var age = 20;
console.log(age);  // 20
console.log(window.age);  // 20

Pour comprendre le fonctionnement du code qu’on a vu ci-dessus il faut savoir comment procède JavaScript avec le mot-clé var. En gros il va traduire le code ainsi :

function setAge(age) {
    var adult;
    if (age > 18) {
        adult = true;
    }
    console.log(adult);	
}
setAge(22);

Il va remonter la déclaration de la variable au début de la fonction et donc cette variable est disponible dans toute la fonction !

Avec le mot-clé var rien n’empêche de déclarer plusieurs fois une variable avec le même identifiant :

var a = 2;
var a = 3;
console.log(a);  // 3

Déclaration avec “let”

Portée des variables

ES6 introduit le nouveau mot-clé let.

Si on reprend le code vu ci-dessus avec let :

function setAge(age) {
    if (age > 18) {
        let adult = true;
    }
    console.log(adult);	
}
setAge(22)

Cette fois on ne va rien obtenir parce qu’en dehors du bloc la variable adult n’existe pas.

D’autre part contrairement à var la portée ne concerne plus l’objet global :

window.age = 10;
let age = 20;
console.log(age);  //20
console.log(window.age);  // 10

Contrairement au mot-clé var, avec let on n’a pas le droit de faire une re-déclaration avec le même identifiant dans le même bloc :

let a = 2;
let a = 3;  // Erreur !

Avec ES6 il est maintenant possible de déclarer une constante, donc une variable dont on ne peut pas changer la valeur, avec le mot-clé const :

const maConstante = 20;

La règle de portée est la même que pour let : le bloc de déclaration.

On ne peut pas non plus faire de re-déclaration avec la même portée.

Vous avez donc le droit d’écrire ce genre de code :

const voiture = {
  marque: "Renault"
};
voiture.marque = "BMW";
console.log(voiture);  // {"marque":"BMW"}

Vous changez la valeur d’une propriété, pas la référence de l’objet.

Par contre vous n’avez pas le droit d’écrire ceci :

const voiture = {
  marque: "Renault"
};
voiture = {
  marque: "Fiat"
};

Parce que là vous changez la référence.

Laisser un commentaire