Comprendre la Portée des Variables en JavaScript

En JavaScript, la portée d'une variable définit où elle peut être utilisée dans le code. Les variables peuvent être déclarées dans différents types de portée :

• Portée Globale
• Portée Locale (fonction)
• Portée de Bloc (introduction avec let et const)

Exemple de Portée Locale

Les variables déclarées dans une fonction sont accessibles uniquement au sein de cette fonction, elles ont donc une portée locale :

        function calculateArea() {
    var area = 10 * 5;
    console.log("Surface locale: " + area);
}

calculateArea();

// Tentative d'accès à area hors de la fonction
console.log("Surface globale: " + area); // Erreur
    

Sortie :

Exemple de Portée Globale

Les variables déclarées en dehors de toute fonction sont accessibles partout dans le script :

        // Variable globale
var user = "Alice";

function showUser() {
    console.log("Utilisateur (fonction): " + user);
}

showUser();
console.log("Utilisateur (global): " + user);
    

Sortie :

Modifier une Variable Globale dans une Fonction

Il est possible de modifier une variable globale à l'intérieur d'une fonction :

        var score = 0;

function updateScore() {
    score += 10;
    console.log("Score dans la fonction : " + score);
}

updateScore();
console.log("Score global : " + score);
    

Sortie :

Variables au Niveau de Bloc

Avec ES6, les variables déclarées avec let et const sont limitées à la portée du bloc dans lequel elles sont définies :

        function showBlockScope() {
    let message = "Portée locale";

    if (true) {
        let message = "Portée de bloc";
        console.log("Message dans le bloc : " + message);
    }

    console.log("Message hors du bloc : " + message);
}

showBlockScope();
    

Sortie :

Utilisation des Variables sans Déclaration

Il est également possible de créer des variables globales implicitement en omettant le mot-clé var, let, ou const. Cela n'est pas recommandé car cela peut entraîner des comportements inattendus :

        function setGlobalVariable() {
    implicitGlobal = "Je suis global sans déclaration";
}

setGlobalVariable();
console.log(implicitGlobal); // Accessible globalement
    

Sortie :