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.