5.1 Portée globale
Les portées (scopes) déterminent la disponibilité des variables et des fonctions dans différentes parties d'un programme. En JavaScript, il existe trois principaux types de portées : globale, locale et par bloc. Comprendre ces portées est important pour gérer efficacement les données et éviter les erreurs dans le code.
La portée globale inclut toutes les variables et fonctions déclarées en dehors de toute fonction ou bloc de code. Ces variables et fonctions sont accessibles de n'importe où dans le code.
Exemple 1 : Déclaration de variables globales
var globalVar = 'I am a global variable';
function showGlobalVar() {
console.log(globalVar); // Accès à la variable globale
}
showGlobalVar(); // Affichera : I am a global variable
console.log(globalVar); // Accès à la variable globale
Exemple 2 : Fonctions globales
Dans cet exemple, la variable globalVar et la fonction globalFunction() sont déclarées dans la portée globale et sont accessibles de n'importe où dans le code.
function globalFunction() {
return 'I am a global function';
}
console.log(globalFunction()); // Affichera : I am a global function
5.2 Portée locale
La portée locale inclut des variables et des fonctions déclarées à l'intérieur d'une fonction. Ces variables et fonctions sont accessibles uniquement à l'intérieur de cette fonction et ne sont pas accessibles en dehors.
Exemple 3 : Déclaration de variables locales
Dans cet exemple, la variable localVar est déclarée à l'intérieur de la fonction localScopeExample() et n'est pas accessible en dehors de cette fonction :
function localScopeExample() {
var localVar = 'I am a local variable';
console.log(localVar); // Accès à la variable locale
}
localScopeExample(); // Affichera : I am a local variable
console.log(localVar); // Erreur : localVar is not defined
Exemple 4 : Fonctions locales
Dans cet exemple, la fonction innerFunction() est déclarée à l'intérieur de la fonction outerFunction() et
n'est pas accessible en dehors de outerFunction() :
function outerFunction() {
function innerFunction() {
return 'I am a local function';
}
console.log(innerFunction()); // Accès à la fonction locale
}
outerFunction(); // Affichera : I am a local function
console.log(innerFunction()); // Erreur : innerFunction is not defined
5.3 Portée par bloc
La portée par bloc inclut des variables déclarées avec let et const à l'intérieur d'un bloc de code,
délimité par des accolades {}. Ces variables sont accessibles uniquement à l'intérieur de ce bloc et ne sont pas accessibles en dehors.
Exemple 5 : Déclaration de variables avec let
Dans cet exemple, la variable blockVar est déclarée à l'intérieur d'un bloc if et n'est pas accessible en dehors :
if (true) {
let blockVar = 'I am a block-scoped variable';
console.log(blockVar); // Accès à la variable de bloc
}
console.log(blockVar); // Erreur : blockVar is not defined
Exemple 6 : Déclaration de variables avec const
Dans cet exemple, la variable i est déclarée à l'intérieur d'un bloc for et n'est pas accessible en dehors :
for (const i = 0; i < 3; i++) {
console.log(i); // Accès à la variable de bloc
}
console.log(i); // Erreur : i is not defined
Particularités de la portée par bloc
Exemple 7 : Blocs imbriqués
Dans cet exemple, la variable innerVar est accessible uniquement à l'intérieur du bloc interne, tandis que la variable outerVar est accessible à la fois dans le bloc externe et le bloc interne :
if (true) {
let outerVar = 'I am in the outer block';
if (true) {
let innerVar = 'I am in the inner block';
console.log(outerVar); // Accès à la variable du bloc externe
console.log(innerVar); // Accès à la variable du bloc interne
}
console.log(outerVar); // Accès à la variable du bloc externe
console.log(innerVar); // Erreur : innerVar is not defined
}
5.4 Interaction des différentes portées
Exemple 8 : Interaction des portées globale et locale
Dans cet exemple, la fonction scopeExample() a accès à la variable globale globalVar et à sa variable locale localVar :
var globalVar = 'I am a global variable';
function scopeExample() {
var localVar = 'I am a local variable';
console.log(globalVar); // Accès à la variable globale
console.log(localVar); // Accès à la variable locale
}
scopeExample(); // Affichera : I am a global variable
// I am a local variable
console.log(globalVar); // Accès à la variable globale
console.log(localVar); // Erreur : localVar is not defined
Exemple 9 : Portées avec une fonction fléchée
Dans cet exemple, la fonction fléchée arrowFunction() a accès à la variable globale globalVar et à sa variable locale localVar :
let globalVar = 'I am a global variable';
const arrowFunction = () => {
let localVar = 'I am a local variable in arrow function';
console.log(globalVar); // Accès à la variable globale
console.log(localVar); // Accès à la variable locale
};
arrowFunction(); // Affichera : I am a global variable
// I am a local variable in arrow function
console.log(globalVar); // Accès à la variable globale
console.log(localVar); // Erreur : localVar is not defined
GO TO FULL VERSION