Zone de Test (mais pas que)

En JavaScript, il existe plusieurs niveaux de portée (scopes) pour les variables. Les principaux sont :

Portée globale : une variable déclarée à l'extérieur de toutes les fonctions est une variable globale et est accessible depuis n'importe quelle partie du code.


            // Définition d'une variable globale à l'extérieur de toute fonction
        var globalVariable = "Je suis une variable globale";
        // Définition d'une variable globale à l'intérieur d'une fonction (à éviter)
        globalVariable = "Je suis une variable globale";

Portée locale : une variable déclarée à l'intérieur d'une fonction est une variable locale et est accessible uniquement à l'intérieur de cette fonction.


                        
            function example() {
            // Définition d'une variable locale à l'intérieur de la fonction
            var localVariable = "Je suis une variable locale";
        }

Portée de bloc : une variable déclarée à l'intérieur d'un bloc de code délimité par des accolades ({ }) est une variable de bloc et est accessible uniquement à l'intérieur de ce bloc.


            function example() {
            if (true) {
                // Définition d'une variable de bloc à l'intérieur du bloc if
                let blockVariable = "Je suis une variable de bloc";
            }
        }

Portée de paramètre : une variable déclarée comme paramètre d'une fonction est une variable de paramètre et est accessible uniquement à l'intérieur de cette fonction.
function example(paramVariable) { // Utilisation d'une variable de paramètre console.log(paramVariable); }

Il est important de comprendre la portée des variables pour éviter les collisions de noms de variables et pour garantir que chaque variable est utilisée dans le contexte approprié.

Dans ces exemples, essayez de deviner ce que va faire le code :


    for (var i=0; i<5; i++) {
        setTimeout(() => {
            console.log(i);
        }, 200);
    }


    for (let i=0; i<5; i++) {
        setTimeout(() => {
            console.log(i);
        }, 200);
    }

Dans ces codes, une boucle for est utilisée pour créer cinq fonctions setTimeout. Chaque fonction setTimeout affiche la valeur de la variable i dans la console après un délai de 200 millisecondes.

Cependant, dans le premier code, la variable i est déclarée avec var, ce qui signifie qu'elle a une portée de fonction et est accessible dans toute la fonction. Cela peut poser problème dans ce cas, car les fonctions setTimeout sont exécutées de manière asynchrone, après la fin de la boucle for, ce qui signifie que la valeur de i au moment de l'exécution des fonctions setTimeout sera la valeur finale de i dans la boucle, soit 5.

Ainsi, lorsque les fonctions setTimeout sont finalement exécutées, elles afficheront toutes la valeur 5, au lieu des valeurs attendues de 0, 1, 2, 3 et 4.

Le deuxième code utilise let à la place de var pour déclarer la variable i, car let est block-scopé et crée une nouvelle variable i pour chaque itération de la boucle. Cela garantit que chaque fonction setTimeout affiche la valeur attendue de i pour cette itération spécifique de la boucle.