Hoisting JS : 2 Min pour Comprendre

Qu’est-ce que le hoisting ?

Le hoisting en JavaScript fait référence au mécanisme par lequel les déclarations de variables et de fonctions sont « hissées » (ou déplacées) en haut de leur portée (scope).

Cela se produit **avant même que le code ne commence à être exécuté (**lors de la phase de « parsing ») par le moteur JavaScript.

Cependant, il y a une différence importante entre la manière dont les variables et les fonctions sont « hissées ».

Le hoisting en action

Hoisting de fonctions

Les déclarations de fonctions sont complètement hoistées en haut du scope.

Cela signifie que vous pouvez appeler une fonction avant qu’elle soit déclarée dans le code car JavaScript déplace la déclaration de la fonction en haut du fichier avant l’exécution du code.

// Appel de la fonction avant sa déclaration
sayHello();  // ✅ "Hello!"

function sayHello() {
  console.log("Hello!");
}

Ici, la fonction sayHello est hoistée en haut du scope, ce qui permet de l’appeler avant sa déclaration.

Hoisting des variables

Hoisting avec var

Les variables déclarées avec var sont aussi hoistées, mais elles ne sont pas initialisées pendant le hoisting.

Seule la déclaration (et non l’assignation) est déplacée.

Les variables var sont alors initialisées à undefined avant que leur déclaration ne soit réellement atteinte dans le code.

console.log(website);  // undefined
var website = "laconsole.dev";
console.log(website);  // laconsole.dev

La déclaration var website est hoistée en haut du scope, mais la valeur "laconsole.dev" n’est assignée qu’à l’endroit où elle apparaît dans le code. Du coup, console.log(website) affiche undefined au début, avant l’assignation.

Hoisting avec let et const

Les variables déclarées avec let et const sont également hoistées, mais elles ne sont pas initialisées immédiatement.

Ces variables existent dans une « zone morte » (Temporal Dead Zone, TDZ) entre le début du bloc et leur déclaration réelle, et il est donc impossible d’y accéder avant la déclaration.

console.log(website);  // ⚠️ ReferenceError: Cannot access 'website' before initialization
let website = "laconsole.dev";

Ici, la variable website est hoistée, mais elle ne peut pas être accédée avant sa déclaration, ce qui provoque une erreur de référence (ReferenceError).

Le hoisting en résumé

Le hoisting est le processus de déplacement des déclarations de variables et de fonctions au début de leur portée.

Les fonctions sont toujours disponibles, en revanche les variables déclarées avec let et const ne sont pas initialisées par le hoisting si elles sont utilisées avant leur déclaration.

Quelles sont les meilleures pratiques ?

Le hoisting peut avoir des conséquences inattendues si vous n’en êtes pas conscient.

Pour éviter les confusions et les erreurs liées au hoisting, il est recommandé de suivre ces pratiques :

1. Toujours initialiser les variables avec let ou const : Cela garantit que les variables ont une valeur définie avant d’être utilisées. Ces mots-clés sont plus modernes et offrent une meilleure clarté du code.
2. Bien structurer son code en blocs cohérents : Encercler les déclarations de variables dans des blocs {} contribue à limiter la portée des variables réduisant des effets de bord potentiels et évitant les problèmes de hoisting involontaires.

En comprenant le hoisting et en suivant ces 2 recommandations simples, vous pouvez écrire du code JavaScript plus clair, plus prévisible et moins sujet à des bugs.