Javascript : Qu'est ce que le hoisting ?
#1
En Javascript on peut appeler une fonction avant de l'avoir déclarée
En Javascript vous pouvez appeler une fonction avant de l'avoir déclarée. C'est assez surprenant mais c'est la réalité. Evidemment il y a une raison à cela. Vous avez déjà dû le constater mais je vais faire un exemple pour le vérifier.
Ci-dessous j'appelle la fonction afficheResultats alors qu'elle n'est pas encore déclarée et pourtant tout se passe bien. Je déclare aussi une variable x que j'initialise à 0. Nous verrons plus loin pourquoi je fais ça.
#2
Expliquer ce fonctionnement par le hoisting
Pour expliquer ce fonctionnement une explication existe : le hoisting (hissage en français). Le raisonnement consiste à dire que toutes les déclarations aussi bien de variables que de fonctions sont déplacées vers le haut de leur espace de portée.
Ainsi la fonction pourrait être appelée avant d'être déclarée puisque déplacée vers le haut de la portée globale par le moteur Javascript.
Il se trouve que c'est une explication qui est donnée disons pour "faire simple" mais qu'en réalité aucune instruction n'est déplacée.
#3
Ce qui se passe en réalité
La vraie explication me parait beaucoup plus simple. En fait le moteur Javascript analyse le code en deux passes :
- Dans la première passe il s'intéresse aux déclarations.
- Dans la deuxième passe il va procéder à l'exécution.
Il me semble que l'on comprend facilement que dans ces conditions le moteur Javascript puisse exécuter une fonction lors d'une deuxième passe alors qu'il l'a identifiée dans une première. J'avoue que je m'interroge sur le bien-fondé d'avoir échafaudé ce concept de hoisting. Mais peut être que certaines choses m'échappent.
En fait c'est l'ordre "d'exécution" des instructions qui se trouve modifié. La déclaration de la fonction afficheResultat (* ligne 12 à 14) va être faite avant l'exécution de la fonction (* ligne 10).
Alors c'est intéressant de regarder ce qui se passe au niveau de la déclaration de la variable let x=0. Dans la première passe le moteur va s'intéresser au let x et dans la deuxième passe il va s'intéresser au x=0. Donc une instruction de ce type est en quelque sorte exécutée en deux temps. Surprenant non !
Pour être précis je dois ajouter que chaque déclaration est rangée dans son espace de portée. Les déclarations lues dans l'espace global seront rangées dans l'espace global. Celles lues dans une fonction seront rangées dans la fonction. Celles lues dans un bloc seront rangées dans le bloc. Cela peut donner une impression de déplacement des instructions mais ce n'est qu'une impression.
