Let vs. Var en JavaScript : démystifier la portée et les zones mortes temporelles

Introduite dans ECMAScript 6, l'instruction let a semé la confusion parmi les développeurs , en particulier en quoi il diffère du mot-clé var établi. Cet article explore les nuances entre ces deux déclarations de variables, en mettant en évidence leurs règles de portée et leurs meilleurs cas d'utilisation.

Portée

La distinction fondamentale réside dans leur comportement de portée. Les variables déclarées avec var sont limitées à la fonction dans laquelle elles sont définies (portée de la fonction), tandis que les variables let sont limitées au bloc dans lequel elles sont enfermées (portée du bloc). Cela signifie laisser aux variables une portée beaucoup plus étroite, les empêchant d'interagir avec des variables définies en dehors de leur bloc immédiat.

Exemple :

function run() {
  var foo = "Foo";
  let bar = "Bar";

  console.log(foo, bar); // "Foo Bar"

  {
    var moo = "Mooo"
    let baz = "Bazz";
    console.log(moo, baz); // "Mooo Bazz"
  }

  console.log(moo); // "Mooo"
  console.log(baz); // ReferenceError
}

run();

Dans l'exemple ci-dessus, la variable var moo reste accessible même en dehors de son bloc, tandis que la variable let baz renvoie une ReferenceError lorsqu'elle est accessible en dehors de son bloc.

Temporel Zones mortes

Une autre différence concerne les zones mortes temporelles (TDZ). Pour les variables let, il existe un TDZ depuis le point de déclaration jusqu'à la fin du bloc dans lequel elles sont définies. Pendant cette période, l'accès à une variable let sans initialisation entraîne une ReferenceError.

Exemple :

function test() {
  console.log(foo); // ReferenceError
  let foo = "Bar";
}

test();

Dans ce code, l'accès à la variable let foo avant son initialisation entraîne une ReferenceError à cause du TDZ.

Quand utiliser Let vs. Var

En général, préférez utiliser let pour les variables dans les blocs pour éviter de polluer la portée globale et éviter les collisions de noms de variables. Var est toujours utile pour les variables qui doivent être accessibles sur plusieurs blocs ou fonctions.