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çue 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 à certaines mauvaises compréhensions. Par exemple, le hissage nous enseigne que les variables et les fonctions sont physiquement déplacées vers le haut de votre 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 écrit dans votre code.

Apprentissage

Exemple technique

L'un des avantages du fait que JavaScript mettent en mémoire les déclarations des fonctions avant d'exécuter tout segment de code, est qui'il vous permet d'utiliser une fonction avant que nous ne la déclarez 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 notre code premièrement, avant sa déclaration, le code fonctionne toujours. Voilà comment le contexte d'exécution ( traduit par scope en anglais ) 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 : latour4, ericnsh, miam
 Dernière mise à jour par : latour4,