[RAPPEL] Scope de Bloc

 
Jusqu’à l’arrivée d’ES6, les scopes étaient uniquement des scopes de fonctions.
Celà est toujours vrai si on n’utilise que le mot-clé var pour déclarer nos variables.

Mais avec ES6, on peut utiliser let et const !

Et les variables créées avec let et const ne respectent pas les scopes de fonctions, elle respectent les scopes de blocs.

Qu’est-ce qu’un bloc ?

Un bloc c’est un bout de code qui commence par une accolade et qui termine par une accolade.

Le code contenu dans une fonction est un bloc.
Exemple:

 function first() {
  let a = 5;
}

Le code contenu dans une condition est un bloc: les if, else, etc…
Exemple:

if (true) {
  let a = 5;
}

Le code contenu dans une boucle est un bloc: les for, while, etc…
Exemple:

for (let i = 0; i < 10; i++) {
  console.log(i);
}

Le code contenu dans un bloc est un bloc 😉

{
  let a = 5;
}

Bref ! Vous l’aurez compris, tout ce qui commence et finit par une accolade est un bloc.

Variables de scope de bloc

Le code contenu dans un bloc peut accéder à toutes les variables créées dans ce bloc et toutes celles créées dans les blocs parents.

Par exemple:

function first() {
  let a = 5;
  if (a > 3) {
    console.log(a);
  }
}

Le console.log(a) affiche 5 car la variable a a été définie avec let dans un bloc parent (celui de la fonction first)

Un autre exemple:

{
  let a = 5;
}
console.log(a);

Ce code donne l’erreur a is not defined car console.log(a) ne peut pas acceder à la variablea qui est dans un bloc enfant.

Scope de bloc VS Scope de fonction

Premier exemple:

Scope de fonction avec var

function first() {
  if(true) {
    var a = 5;
  }
  console.log(a);
}

Le console.log(a) affiche 5 car la variable a a été définie avec var dans le même scope de fonction (celui de la fonction first)

Scope de bloc avec let

function first() {
  if(true) {
    let a = 5;  
  }
  console.log(a);
}

Ici le console.log(a) renvoit une erreur car la variable a a été définie avec let et donc elle respecte les scopes de bloc.
Et le scope de bloc du console.log(a) est celui de la fonction first et celui du let a = 5 est le scope de bloc du if.
Le scope de bloc de la fonction first n’a pas accès aux variables du scope de bloc du if.

Deuxième Exemple

Scope de fonction avec var

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

Le dernier console.log(i) affiche 10 et non 62 car c’est exactement la même variable i qui a été redéfinie avec var.

En effet, le var i = 62; et le var i = 0; appartiennent au même scope de fonction (le scope global dans ce cas là).
Donc le i a perdu sa valeur 62 et a pris la valeur de 0.
Ensuite avec le for, il est arrivé jusqu’à 10, et donc le dernier console.log(i) affiche 10 et non 62.

Scope de bloc avec let

let i = 62;
for (let  i = 0; i < 10; i++) {
  console.log(i);
}
console.log(i);

Au départ, je crée la variable i avec let i = 62; et donc je suis dans un scope de bloc (le scope global dans ce cas là).
Ensuite avec mon for, je crée une nouvelle variable i avec let i = 0;.

Ces deux i sont 2 variables distinctes: chacune appartient à un scope de bloc différent.
Et donc le dernier console.log(i) affiche la valeur du i de son scope de bloc (le scope global dans ce cas là), soit 62.