Hoisting en JavaScript

Le hoisting est un mécanisme par défaut en JavaScript, où les déclarations de variables et de fonctions sont "prélevées" de leur définition à l'intérieur du code. Cela signifie que ces déclarations sont « déplacées » vers le début du fichier, au-dessus de leur utilisation effective. Ainsi, JavaScript est capable de reconnaître ces déclarations avant l'exécution du reste du code.

Variables

En JavaScript, les variables créées avec le mot-clé var sont sujettes au hoisting. Par exemple :

console.log(`Mon nom est ${myName}.`); // Affiche : Mon nom est undefined.
var myName = 'Brandon';

Dans cet exemple, nous tentons d'afficher myName dans la console avant même qu'il ne soit déclaré. Le résultat est donc undefined. Bien que le compilateur JavaScript ait préalablement enregistré la déclaration de myName en mémoire, sa définition reste inconnue à ce stade.

Fonctions

Les fonctions, à l'instar des variables, sont également sujettes au hoisting. Parce que celles-ci sont considérées comme des "objets de première classe", elles peuvent être assignées à des variables. Les déclarations de fonctions sont, comme celles des variables, élevées durant la phase d'exécution :

console.log(greetings()); // Affiche : Salut ! Je m'appelle Brandon.
function greetings() {  var myName = 'Brandon';  console.log(`Salut ! Je m'appelle ${myName}.`);}

Dans cet exemple, nous exécutons la fonction avant sa définition, mais elle fonctionne tout de même, car elle a été hoistée.

let et const

L'introduction des mots-clés let et const avec ES2015 (ES6) modifie la manière dont le hoisting fonctionne. Ces nouveaux mots-clés traitent les déclarations de variables différemment par rapport à var. Lorsqu'une variable est déclarée avec let ou const, elle est également soumise au hoisting, mais sans initialisation. Par conséquent, si vous tentez d'accéder à ces variables avant leur déclaration, JavaScript lancera une ReferenceError :

console.log(`Mon nom est ${myName}.`); // ReferenceError: Impossible d'accéder à 'myName' avant son initialisation.
let myName = 'Brandon';

Conclusion

Le hoisting est un concept fondamental qui aide à comprendre l'exécution des variables et des fonctions en JavaScript. Bien que var puisse laisser passer des erreurs lors de l'accès aux variables avant leur définition, l'utilisation de let, const, et la zone morte temporaire (TDZ) permettent de mieux structurer le code et d'éviter des comportements inattendus.