Hoisting en JavaScript

En JavaScript, le hoisting est un comportement qui permet d'utiliser une fonction ou une variable avant qu'elle ne soit déclarée dans le code. Découvrons-le avec des exemples concrets.

Exemple de Hoisting de Variable

Voici un exemple simple de levée de variable avec le mot-clé var :

// utilisation de la variable score avant sa déclaration
console.log(score);

// déclaration et initialisation de la variable score
var score = 10;

// Sortie : undefined

Explication : En JavaScript, la déclaration de la variable `score` avec `var` est levée en haut du scope, mais son initialisation ne l'est pas. Ainsi, lorsque vous accédez à `score` avant l'initialisation, il retourne `undefined`.

Hoisting Avec let et const

Contrairement à var, les variables déclarées avec let et const sont également levées, mais elles ne sont pas initialisées immédiatement, ce qui entraîne une erreur si on essaie d'y accéder avant leur déclaration :

// utilisation de la variable message avant déclaration
console.log(message);

// déclaration de la variable avec let
let message = "Bonjour";

// Sortie : ReferenceError: Cannot access 'message' before initialization

Explication : Les variables déclarées avec `let` et `const` sont levées, mais elles se trouvent dans une "zone morte" jusqu'à leur déclaration. Accéder à ces variables avant leur déclaration entraîne une erreur `ReferenceError`.

Hoisting des Fonctions

En JavaScript, il est également possible d'appeler une fonction avant sa déclaration, grâce au hoisting des fonctions :

// appel de la fonction avant sa déclaration
greet();

// déclaration de la fonction
function greet() {
    console.log("Bienvenue chez Pandacodeur !");
}

// Sortie : Bienvenue chez Pandacodeur !

Explication : Les fonctions sont levées entièrement, ce qui signifie que vous pouvez appeler une fonction avant sa déclaration. Le hoisting inclut la déclaration entière de la fonction, donc l'appel fonctionne correctement.

Initialisations Non Levées

Bien que les déclarations de variables soient levées, les initialisations ne le sont pas. Voici un exemple :

// affichage du nombre avant initialisation
console.log(nombre);

var nombre = 5;

// Sortie : undefined

Explication : La déclaration de `nombre` est levée, mais son initialisation ne l'est pas. Ainsi, accéder à `nombre` avant son initialisation retourne `undefined`.

Résumé

• Les variables déclarées avec var sont levées avec une valeur undefined.
• Les variables déclarées avec let et const sont levées mais non initialisées, ce qui provoque une erreur si elles sont utilisées avant d'être déclarées.
• Les fonctions sont levées, ce qui permet de les appeler avant leur déclaration.
• Les initialisations ne sont pas levées, seules les déclarations le sont.