Nouveauté en JavaScript : LET

Comment fonctionne let

En JavaScript, on a l’habitude d’utiliser la commande var pour déclarer une variable. Mais la commande ne fonctionne pas exactement comme dans la plupart des langages, dont les programmeurs ont souvent l’habitude, tels PHP, C++ et Java. Sa portée est différente, et ça peut faire une différence dans la façon dont fonctionne votre code.

Débutons avec un exemple :

var myText = 'Rouge';

function changeMyText() {
    var myText = 'Vert';
}

modifierText();

console.log( myText );

// La console affichera : Vert.

En PHP ou en Java, on pourrait s’attendre à ce qu’au moment où l’on affiche la variable, son contenu soit « rouge », car on était dans le cadre d’exécution d’une fonction quand on l’a modifiée. Mais c’est différent en JavaScript, car l’instruction var a une portée globale au script.

Cependant, une mise à jour récente de JavaScript (EcmaScript 6) a apporté une nouvelle commande : let. Cette nouvelle arrivante permet de déclarer une variable et de lui donner une portée limitée au bloc de code actuel, ainsi que tous les sous-blocs qu’il contient. Les fonctions, les boucles while et les conditions if sont des exemples de blocs de code à cet effet.

Revenons à l’exemple précédent :

// On déclare notre variable globale, comme précédemment.
var myText = 'Rouge';

function changeMyText() {
    // Cette variable n'existe que dans le contexte de cette fonction.
    let myText = 'Vert';
    let myNumber = 8;

    if( true ) {
        // Ici, myNumber == 8 existe encore.
        let otherNumber = 4;
    }
    // Cependant, ici, otherNumber == 4 n'existe plus.
}

modifierText();

console.log( myText );
// La console affichera : Rouge.

Puisque la variable myText de la fonction changeMyText() est limitée dans sa portée, et ne crée pas de propriété à l’objet this global, la déclarer et lui assigner une valeur n’a eu aucun effet sur la variable d’origine.

Les avantages de let

• Maintenabilité : Permet d’utiliser des noms de variables simples (comme color) sans crainte d’interférer avec d’autres parties du script.
• Performance : Une variable var, même lorsque créée « localement » dans une fonction, a tendance à rester dans la mémoire vive du navigateur jusqu’à ce que l’utilisateur quitte la page. Une variable let, en revanche, est effacée de la mémoire dès que son cadre d’exécution est terminé ; dès qu’on n’en a plus besoin, en somme. Il est particulièrement souhaitable de limiter son empreinte de mémoire lorsqu’on sait qu’un ou une application pourrait être visitée avec un appareil mobile bas de gamme, par exemple.
• Simplicité : Utiliser let ne chamboulera pas nos vies de développeurs. L’utiliser est simple.

Compatibilité

La plupart d’entre nous peuvent utiliser let dès maintenant. En effet, la commande est disponible sur tous les navigateurs modernes, ainsi qu’Internet Explorer 11.

Plus d’informations sur let (MDN)