Hoisting
Le hoisting est une mécanique en JavaScript qui permet de déplacer conceptuellement la déclaration des variables et des fonctions vers le “haut” de leur portée respective.
var
Une variable déclarée via var est hissée vers le haut de sa portée lors de la compilation. Sa valeur est undefined jusqu’à ce que le code lui assigne une valeur. Voici un exemple de hoisting de variable avec var:
console.log(message); // undefined
var message = "Bienvenue";console.log() affiche undefined et aucune erreur ne se produit alors que la déclaration de message est effectuée après.
Voici ce qui se passe réellement avec le hoisting:
var message;
console.log(message); // undefined
message = "Bienvenue";let et const
Une variable déclarée via const ou let est hissée vers le haut de sa portée lors de la compilation mais contrairement à var elle n’est pas utilisable jusqu’à ce que le code lui assigne une valeur. Une exception ReferenceError: x is not defined est levée si l’on essaie d’y accéder avant son assignation.
console.log(x); // ReferenceError: x is not defined*
let x = 1;console.log(y); // ReferenceError: y is not defined*
const y = 1;fonction
Les déclarations de fonctions sont également hissées vers le haut de leur portée respective lors de la phase de compilation. Ce mécanisme a un côté pratique car il permet de déclarer des fonctions après leur utilisation dans le code, comme à la fin d’un script.
hello(); // affiche Hello
function hello() {
console.log('Hello');
}Toutefois si la fonction est déclarée dans une variable var
hello();
var hello = () => {
console.log('Hello');
}Une erreur se produit hello is not a function. En effet comme vu précédemment une variable déclarée viar le mot-clé var est hissée en haut de sa portée avec la valeur undefined et ne peut donc être invoquée.