Qu’est ce que le Hoisting en javascript?

Introduction

Le « hoisting », qu’on peut traduire par « hissage » en français est un concept important en Javascript. En effet, il permet de mieux comprendre comment le code est exécuté et d’éviter pas mal d’erreurs au quotidien. On va voir ensemble de façon très concrète ce qu’est le hoisting. On utilisera des exemples que vous pourrez run directement dans la page donc n’hésitez pas à jouer avec! 🙂

Découverte du Hoisting

En javascript, la déclaration des variables et des fonctions classiques est « hissée » en haut du contexte courant (scope). Pour faire simple, c’est comme si les déclarations étaient copiées/collées en haut du fichier ou de la fonction à laquelle elles appartiennent. Dans l’exemple ci-dessous, les codes sont donc équivalents (je vous invite à exécuter ce code pour vous en convaincre 😉 )

<script>
	var test;
	test = 1;
	alert(test); // 1
</script>

<script>
  test = 1; 
  alert(test); // 1 aussi alors que test est déclaré après sont utilisation
  var test;
</script>

L’initialisation quant à elle n’est pas soumise à cette règle: on ne peut pas initialiser une variable après son utilisation:

<script>
  alert(test); // undefined
  var test = 1;
</script>

Note: cela fonctionne uniquement avec les variables définies avec le mot clé var. Pour celles définies avec let ou les constantes, il n’est pas possible de les utiliser avant de les avoir déclarées !

<script>
  test = 1; 
  alert(test); // undefined
  let test;
</script>

Pour les fonctions classiques, c’est la même chose (cela ne fonctionne pas avec les arrow function).

<script>
  
  function printTest(){
    test = 1; 
    alert(test); 
    var test;
 }

printTest(); // 1

</script>

<script>
  
 printTest(); // 1 aussi

 function printTest(){
   test = 1; 
   alert(test); 
   var test;
 }

</script>

Conclusion

Le hoisting est lié à la façon dont javascript gère sa mémoire et c’est une notion qu’il faut connaître pour mieux comprendre certaines situation. En revanche, à titre personnel je pense qu’il est mieux de déclarer ses fonctions et ses variables en haut de leur contexte d’utilisation pour qu’il n’y ait aucune ambiguïté ! 🙂

Sources

https://developer.mozilla.org/fr/docs/Glossary/Hoisting

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var

Image retouchée à partir de d’une photo de Andrey Kremkov