JavaScript - 7.2 Hoisting en JavaScript : fonctions et erreurs de référence

Le hoisting, ou remontée, est un comportement du moteur JavaScript. Il place les déclarations de fonctions en haut de leur portée avant d'exécuter le code. Cette leçon montre ce qui se passe avec une déclaration de fonction, puis avec une expression de fonction, qui provoque une erreur. Elle compare aussi le cas des variables.

Appeler une fonction déclarée avant sa définition

Une fonction définie avec la syntaxe de déclaration peut être appelée avant d'être définie dans le fichier. Le code s'exécute sans erreur, comme le montre la console.

Le moteur JavaScript remonte automatiquement ces déclarations en haut de leur portée, avant d'exécuter le code. C'est pour cette raison que l'appel fonctionne.

direBonjour();

function direBonjour() {
  console.log("Bonjour");
}

Pourquoi une expression de fonction échoue

Une expression de fonction affecte une fonction à une variable. Si on l'appelle avant cette affectation, le navigateur renvoie une erreur de référence : la fonction n'est pas encore définie.

La vidéo montre la même erreur avec une variable utilisée avant sa déclaration. La règle est identique : on ne peut pas utiliser un nom avant son initialisation.

direAuRevoir(); // erreur de référence

const direAuRevoir = function () {
  console.log("Au revoir");
};

En résumé

Une déclaration de fonction peut être appelée avant sa définition, grâce au hoisting. Une expression de fonction, affectée à une variable, ne peut pas être appelée avant son initialisation. Dans ce cas, JavaScript renvoie une erreur de référence. La même règle vaut pour les variables.

Points clés

• Le hoisting place les déclarations de fonctions en haut de leur portée.
• Une déclaration de fonction peut donc être appelée avant sa définition.
• Une expression de fonction ne suit pas cette règle.
• Utiliser un nom avant son initialisation provoque une erreur de référence.
• Les variables ne peuvent pas non plus être utilisées avant leur définition.

Questions fréquentes

Qu'est-ce qu'une erreur de référence ?

C'est une erreur qui apparaît quand on utilise un nom qui n'est pas encore défini. Le navigateur l'affiche dans la console.

Quelle différence entre une déclaration et une expression de fonction ?

La déclaration utilise le mot-clé function suivi d'un nom. L'expression affecte la fonction à une variable.

Faut-il éviter le hoisting ?

Le plus simple est de définir les fonctions et les variables avant de les utiliser. Le code reste ainsi facile à lire.