Portée des Variables en JavaScript

Introduction à la Portée des Variables

La portée des variables en JavaScript désigne les zones où ces variables peuvent être référencées et utilisées. Avant l'avènement d'ES6 en 2015, JavaScript ne proposait que deux types de portée : la portée globale et la portée de fonction. L'introduction des mots-clés let et const avec ES6 a permis d'intégrer la notion de portée de bloc.

Portée Globale

Une variable que l'on peut utiliser partout dans un programme est considérée comme ayant une portée globale, ce qui en fait une variable globale. Pour qu'une variable soit globale, elle doit être déclarée en dehors de toutes les fonctions. Par exemple :

var x = 5; // Variable globale
console.log(x); // Ce code peut utiliser la variable x

function maFonction() {
  console.log(x + 2); // Ce code peut aussi utiliser la variable x
}
maFonction();

Si l'on assigne une valeur à une variable qui n'a pas été déclarée dans une fonction, celle-ci sera aussi une variable globale.

function maFonction() {
  y = 10; // Variable globale
}
maFonction();
console.log(y); // Ce code peut utiliser la variable y

Portée de Fonction

Une variable qui est déclarée à l'intérieur d'une fonction a une portée de fonction, ce qui en fait une variable locale. Une fois qu'une variable locale est définie, elle est accessible partout dans la fonction où elle est déclarée :

function maFonction() {
  var y = 4; 
  if (y === 4) {
    var z = 8; 
    console.log(y); // Ce code peut utiliser la variable y
    console.log(z); // Ce code peut aussi utiliser la variable z
  }
  console.log(y); // Ce code peut encore utiliser y
  console.log(z); // Ce code peut aussi utiliser z
}
maFonction();
console.log(y); // Ce code NE PEUT PAS utiliser y

Portée de Bloc

En 2015, JavaScript a fait un pas en avant avec l'introduction des mots-clés let et const. Ces mots permettent d'utiliser la portée de bloc. Une variable définie avec let ou const dans un bloc { } est considérée comme ayant une portée de bloc, ce qui la rend accessible uniquement à l'intérieur de ce bloc :

function maFonction() {
  let y = 4;
  if (y === 4) {
    let z = 8;
    console.log(y); // Ce code peut utiliser la variable y
    console.log(z); // Ce code peut utiliser la variable z
  }
  console.log(y); // Ce code peut aussi utiliser y
  console.log(z); // Ce code NE PEUT PAS utiliser z
}
maFonction();
console.log(y); // Ce code NE PEUT PAS utiliser y
console.log(z); // Ce code NE PEUT PAS utiliser z