Le hoisting ( traduit par "hissage" en français ) en JavaScript,  est un terme que vous ne trouverez dans aucune prose de spécification normative avant  ECMAScript® 2015  Le hissage a été conçu comme une façon générale de penser à la manière dont le contexte d'exécution (en particulier les phases de création et d'exécution) fonctionne en JavaScript.

Mais, le hissage peut nous entraîner dans certaines erreurs de compréhension. Par exemple, le hissage enseigne que les déclarations de variables et de fonctions sont physiquement déplacées vers le haut du code, alors que ce n'est pas du tout le cas.

Ce qui se passe est que les déclarations des variables et des fonctions sont mises en mémoire durant la phase de compilation, mais restent exactement à l'endroit où vous les avez écrites dans votre code.

En apprendre plus

Exemple technique

L'un des avantages du fait que JavaScript mette en mémoire les déclarations des fonctions avant d'exécuter tout segment de code, est qu'il vous permet d'utiliser une fonction avant que nous ne la déclariez dans votre code. Par exemple :

function catName(nom) {
  console.log("Mon chat s'appelle " + nom);
}

catName("piopio");
/*
Le résultat du code ci-dessus est: "Mon chat s'appelle piopio"
*/

Le fragment de code ci-dessus est la façon dont vous vous attendez à écrire le code pour qu'il fonctionne. Voyons maintenant ce qui se passe quand nous appelons la fonction avant de la déclarer :

catName("doudou");

function catName(nom) {
  console.log("Mon chat s'appelle " + nom);
}
/*
Le résultat du code ci-dessus est: "Mon chat s'appelle doudou"
*/

Même si nous appellons la fonction dans notre code en premier, avant sa déclaration, le code fonctionne toujours. Voilà comment le contexte d'exécution  fonctionne en JavaScript. Le hissage fonctionne aussi bien avec les autres types de données qu'avec les variables.  Les variables peuvent être initialisées et utilisées avant leurs déclarations. Mais elles ne peuvent pas être utilisées sans avoir été initialisées.

Exemple technique

num = 6;
num + 7;
var num; 
/* Ne signale aucune erreur tant que num est déclarée*/

JavaScript hisse les déclarations, pas les initialisations. Si vous déclarez une variable et que vous l'utilisez avant de l'initialiser, sa valeur sera indéfinie. Illustrons ce comportement par les deux exemples ci-dessous.

var x = 1; // Déclare et initialise x
console.log(x + " " + y); // Affiche '1 undefined'
var y = 2; // Déclare et initialise y


// Le code suivant se comportera exactement comme le précédent: 
var x = 1; // Déclare et initialise x
var y; // Déclare y
console.log(x + " " + y); // Affiche '1 undefined'
y = 2; // Initialise y

Références techniques

Étiquettes et contributeurs liés au document

Étiquettes : 
 Contributeurs à cette page : loella16, latour4, ericnsh, miam
 Dernière mise à jour par : loella16,