Définition de variables dans JavaScript –

La finalisation d’ES6 en 2015 a apporté de nouvelles façons de définir les variables JavaScript. Le let Le mot clé crée une variable à portée de bloc tandis que const spécifie une valeur immuable. Voici comment ces types de variables modernes diffèrent du classique var.

Var

Avant ES6, var était votre seule option lors de la définition d’une variable. Vous pouvez modifier librement les valeurs des variables créées avec var. Vous pouvez également redéclarer la variable elle-même.

var demo = "first value";
var demo = "second value";
demo = "third value";
example = "this throws an error - variable not declared";

Utilisant var crée une variable étendue à la fonction actuelle. Dans le cas où vous l’utilisez en dehors d’une fonction, la variable résultante aura une portée globale.

La «portée» d’une variable décrit où elle peut être utilisée. Une variable à portée fonction est accessible par code dans la fonction qui la définit. Une variable globale est accessible dans tout votre code.

var myGlobal = "global";
 
function testA() {
    var myFunctionScope = "testA";
    console.log(myFunctionScope);
    console.log(myGlobal);
}
 
function testB() {
    myGlobal = "overwritten!";
    console.log(myGlobal);
   // console.log(myFunctionScope);          // ERROR
}
 
testA();
testB();
testA();

Dans cet exemple, la différence entre les variables de portée globale et de fonction est présentée. myGlobal peut être lu (et écrit) par les deux testA et testB. myFunctionScope n’est défini que dans testA, alors testB renvoie une erreur lors de la tentative d’accès. Voici ce que cet exemple produirait:

testA
global

overwritten!

testA
overwritten!

La valeur de myFunctionScope est maintenu séparément dans chaque fonction. La valeur de myGlobal est mis à jour dans les deux fonctions lorsque testB l’écrase.

Laisser

Le plus récent let mot-clé est l’alternative moderne à var. Vous pouvez souvent adopter let dans tous les endroits où tu écrivais var. Il y a cependant des différences importantes à noter.

Le plus significatif let caractéristique est sa portée. Les variables sont étendues à des blocs de code individuels au lieu de fonctions entières. En JavaScript, un bloc est une section de code entourée d’accolades. Chaque let variable n’est accessible qu’au code dans son bloc.

function letTest(x) {
    let demo = "hello world";
 
    if (x > 10) {
        let y = 9000;
        demo = "foobar";
    }
 
    console.log(demo);  // "foobar"
    console.log(y);     // ERROR
}

Dans cet exemple, le if l’instruction crée un nouveau bloc de code. Les blocs héritent de la portée de leur bloc parent, de sorte que demo la variable reste disponible. Le y variable est étendue à la if déclaration. Essayer d’accéder y en dehors de la if block entraîne une erreur de variable non définie.

Aimer var, variables créées avec let peuvent changer leurs valeurs à tout moment. Ils ne peuvent cependant pas être redéclarés – en utilisant let deux fois avec le même nom dans un seul bloc provoquera une erreur.

let demo = "test";
demo = "example";
let demo = "test";      // ERROR

Une exception se produit lors de la redéclarer une variable dans une étendue imbriquée. Les règles de la portée au niveau du bloc signifient que cela est autorisé – vous vous retrouvez avec deux séparé variables qui ont le même identifiant.

let foo = "bar";
if (true) {
    let foo = "foobar";
    console.log(foo);
}
console.log(foo);

L’exemple ci-dessus émettrait foobar bar. Le foo variable est redéclarée dans le if bloc, sans affecter le foo variable de la portée externe. Vous perdez la possibilité de référencer la variable externe à partir du bloc interne.

Const

Le const mot-clé était un autre ajout d’ES6. Il a une portée de bloc comme let. const est l’abréviation de «constant» et est utilisé pour des valeurs immuables qui ne changeront jamais. Essayer de mettre à jour la valeur d’un const variable entraînera toujours une erreur.

const foo = "bar";
const foo = "foobar";   // ERROR

Par conséquent, vous devez toujours initialiser const variables avec une valeur. Il n’est pas permis de définir un const et définissez sa valeur ultérieurement.

let demoLet;                    // OK
var demoVar;                    // OK
const demoConst;                // ERROR
const demoConst = "value";      // OK

Techniquement, const ne définit pas une valeur constante. Cela crée en fait un référence constante à une valeur. Cela a pour effet que vous pouvez toujours mettre à jour les propriétés des objets affectés à un const. Les erreurs ne se produisent que si vous utilisez le const lui-même sur le côté gauche d’une affectation.

Quel type de variable dois-je utiliser?

Tu devrais adopter let pour la plupart des variables à usage général de votre code JavaScript. La portée au niveau du bloc et la redéclaration interdite aident à détecter les erreurs et à éviter les écrasements involontaires.

Utilisant let arrête les «fuites» de variables, où les variables sont accessibles dans des portées auxquelles elles ne sont pas destinées. Un exemple classique est celui des itérateurs en boucles:

for (var i = 0; i <= 10; i++) {
    // do something
}
console.log(i);

Cela entraînerait 10 être émis vers la console. Utilisant let à la place émettrait undefined, comme le i variable serait inaccessible en dehors de if. portée. C’est généralement le résultat souhaité dans ce type de scénario.

Les boucles démontrent également les dangers de var réaffectation:

for (var i = 0; i <= 10; i++) {
    setTimeout(() => console.log(i), 1000);
}

À première vue, ce code lui ressemble devrait émettez les nombres de 1 à 10. À la place, 10 sera enregistré dix fois. setTimeout() est asynchrone et i dans le rappel est lié lexicalement à la portée. Comme var i est utilisé dans la boucle, le i variable obtient une nouvelle valeur à chaque itération. Lorsque le rappel du minuteur s’exécute, les dix itérations sont déjà terminées et i se résoudra toujours à la valeur finale – 10, dans ce cas.

Utilisant let i à la place déclarerait un Nouveau variable appelée i pour chaque itération de la boucle. Chaque variable conserverait sa propre valeur une fois son itération terminée, ce qui donnerait la sortie de journal attendue.

Quand ne pas utiliser Let

Il y a des scénarios où vous ne devriez pas utiliser let. Tu devrais utiliser const lorsque vous créez une variable dont vous savez qu’elle ne changera jamais. Les bundlers et les outils d’analyse statique pourront alors vous alerter si vous essayez involontairement de réaffecter sa valeur.

C’est généralement une bonne idée de garder les variables immuables dans la mesure du possible. Cela aide à éliminer les bogues causés par des écrasements involontaires. Utilisant const vous aide également à indiquer votre intention dans une base de code en expliquant qu’une valeur ne changera pas.

Fonctionnalités ES6 telles que let et const sont désormais universellement pris en charge par les navigateurs modernes. Certains navigateurs plus anciens sans prise en charge complète de ES6, notamment Internet Explorer 11, les offrent également. Vous n’avez pas à vous soucier de leur disponibilité, sauf si vous ciblez une plate-forme très datée. Utilisation let et const pour garder votre code plus propre et réduire le risque de bogues cachés.