Selon le mot-clé utilisé et selon l'endroit où on déclare une variable, celle-ci aura une durée de vie différente. On appelle ça la portée de la variable ou scope.
Portée globale
- Une variable déclarée hors de toute fonction ou bloc (instructions délimitées par des
{ }
comme les conditions ou les boucles) est dite de portée globale. - Elle est utilisable dans tout le code : fonctions, conditions, boucles.
// On déclare une variable hors de toute fonction ou bloc
const salutations = "Coucou le monde !";
// Elle est utilisable dans la fonction saluer() sans même la passer en argument
function saluer() {
console.log(salutations);
}
Portée de bloc
- Une variable déclarée avec les mots-clés
let
ouconst
dans une fonction ou dans un bloc a une portée dite de bloc. - Elle ne peut être utilisée que dans le bloc ou la fonction où elle a été déclarée.
// On déclare une condition (bloc)
if (true) {
// On déclare une variable dans le bloc de la condition
const salutations = "Coucou le monde !";
// On peut l'utiliser dans la condition
console.log(salutations);
}
// Par contre, on ne peut pas l'utiliser à l'extérieur de la condition
console.log(salutations); // Affiche une erreur
Portée de fonction
- Une variable déclarée avec le mot-clé
var
a une portée dite de fonction. - Contrairement aux variables déclarées avec
let
ouconst
, elle peut exister en dehors du bloc dans laquelle elle a été déclarée. - En revanche, elle ne peut pas être utilisée à l'extérieur de la fonction où elle a été déclarée.
// On déclare une fonction
function saluer() {
// On déclare une variable dans la fonction
var salutations = "Coucou le monde !";
// On peut l'utiliser dans la fonction
console.log(salutations);
}
// Par contre, on ne peut pas l'utiliser à l'extérieur de la fonction
console.log(salutations); // Affiche une erreur
Exemple avec plusieurs scopes
// On déclare une fonction, qui va avoir sa propre portée
function maFonction() {
// On déclare deux variables avec var et const, elles ont pour portée la fonction
var salutations = "Coucou le monde !";
const salutations2 = "Hello the world !";
// On déclare une condition dans la fonction. Elle crée sa propre portée, à l'intérieur de la fonction
if(true) {
// La condition étant dans la fonction, on peut utiliser salutations et salutations2
console.log(salutations);
console.log(salutations2);
// On déclare deux autres variables avec var et const
var salutations3 = "Ciao il mondo !";
const salutations4 = "Hej Verden !";
}
// On peut utiliser salutations3 car elle est déclarée avec var, qui a pour portée la fonction
console.log(salutations3); // Affiche "Ciao il mondo !"
// Par contre, on ne peut pas utiliser salutations4 car elle est déclarée avec const, qui a pour portée la condition
console.log(salutations4); // Affiche une erreur
}
// Hors de la fonction, on ne peut utiliser aucune des 4 variables déclarées !