Portée en JavaScript

En JavaScript, la portée définit le contexte d'accessibilité des variables, fonctions et objets. On distingue trois types principaux : la portée globale, la portée de fonction et la portée de bloc (introduite avec ES6).

Portée globale

Les variables déclarées dans la portée globale sont accessibles depuis n'importe quel script ou fonction sur la page. Elles sont généralement créées avec le mot-clé var à l'extérieur des fonctions ou via des propriétés de l'objet window.

var variableGlobale = "Je suis globale";

function fonctionGlobale() {
    console.log(variableGlobale); // Accès à la variable globale
}

fonctionGlobale(); // Sortie: Je suis globale

Portée de fonction

Les variables déclarées à l'intérieur d'une fonction sont limitées à cette fonction et inaccessibles de l'extérieur. Chaque appel de fonction crée une nouvelle portée.

function maFonction() {
    var variableLocale = "Je suis locale à la fonction";
    console.log(variableLocale); // Accès à la variable locale
}

maFonction();
console.log(variableLocale); // Erreur: variableLocale n'est pas définie

Portée de bloc (ES6)

La portée de bloc est créée par des blocs de code entourés d'accolades, comme les instructions if ou les boucles for. Les variables déclarées avec let ou const ont une portée limitée à ce bloc.

if (true) {
    let variableBloc = "Je suis locale au bloc";
    console.log(variableBloc); // Accès à la variable du bloc
}

console.log(variableBloc); // Erreur: variableBloc n'est pas définie

Remarques importantes

• Les variables déclarées avec var n'ont pas de portée de bloc ; elles ont une portée de fonction ou globale.
• Les variables déclarées avec let et const ont une portée de bloc.
• À l'intérieur des fonctions, privilégiez let ou const pour éviter les problèmes de portée.
• Les variables globales sont accessibles partout, ce qui peut causer des conflits de noms. Utilisez-les avec prudence.

Appels de fonctions et direction de this

Considérons l'exemple suivant pour comprendre le comportement de this :

function exempleFonction() {
    this.propriete = "abc123";
    console.log(this);
    return "resultat";
}
console.log(exempleFonction());

Lorsque la fonction est appelée normalement, this pointe vers l'objet window dans un environnement de navigateur, car l'exécution se produit dans le contexte global.

Utilisons maintenant le mot-clé new :

function Constructeur() {
    this.valeur = "xyz789";
    console.log(this);
    return "instance";
}
console.log(new Constructeur());

Lorsqu'une fonction est appelée avec new, elle agit come un constructeur. this pointe alors vers la nouvelle instance d'objet créée. L'appel new Constructeur() génère un objet où this fait référence à cet objet.