Nouvelles Chroniques d'Amethyste

Penser au Sens, pas au Verbe

Le hoisting en Javascript

Poster un commentaire

Edit: j’ai fait plusieurs modifications le 14/04/16.

D’abord on ne dit pas hoistering, mais hoisting. Du verbe to hoist qui est à peu près synonyme de to lift. Comment j’ai pu laisser passer un truc pareil????

J’ai également ajouté un exemple supplémentaire (le deuxième). Il est moins complexe que celui d’origine et peut-être plus clair.

 

Le hoisting est une des propriétés fondamentales de JavaScript. Examinons ce que c’est à travers le code suivant:

toto=1;

function demo() {
    toto=2;
    var toto = 3;
    return toto;
}

alert(toto); //1
alert(demo()); // 3
alert(toto); // 1

 

Si vous avez lu cet article, vous savez que la déclaration de la ligne 1 affecte une propriété toto au scope global, en l’occurrence Window. La fonction demo() affecte également une variable toto en ligne 5. La question qui va nous intéresser est le télescopage éventuel des divers toto, en particulier celui de la ligne 4 puisque nous savons qu’en 5 on va en réalité créer une variable privée à l’intérieur du scope fournit par demo().

Les lignes 9, 10 et 11 vont répondre à notre question.

En 9 on affiche 1. Ce qui est le résultat attendu au vu de la ligne 1.

Les choses intéressantes commencent ensuite. Tout d’abord on appelle demo() et on constate qu’elle retourne 3. Par conséquent, le script return toto; recherche toto dans le scope courant puis éventuellement remonte plutôt que de démarrer depuis le scope global.

La ligne 11 remonte 1. La règle précédente s’applique là aussi.

On peut aussi en tirer une autre conclusion. La variable toto de la ligne 4 ne référence pas Window.toto, mais celle déclarée ligne suivante. Donc tout se passe comme si la déclaration en var avait migrée au début du scope courant.

C’est ce phénomène important que l’on appelle le hoisting. Il permet d’utiliser une variable avant de l’avoir déclarée.

 

Je vais montrer un deuxième exemple de hoisting, un piège en fait. L’existence du hoisting est en fait l’indice que JavaScript n’est pas un langage interprété, mais un langage en deux passes. C’est cela que l’on appelle le hoisting. Regardez ce code:


console.log(toto);
var toto='abc';
console.log(toto);

Il s’affiche ceci:

undefined

abc

 

Pourquoi? A cause du hoisting. Lors de la première passe, l’interpréteur JavaScript rencontre la ligne 1 qui accède à la variable toto. Le rôle de la première passe n’est pas d’exécuter ou compiler quoi que ce soit, mais de repérer les références.

L’interpréteur constate que toto n’est pas déclarée. Il va donc transformer le code en quelque chose de similaire à ceci:

var toto;
console.log(toto);
var toto='abc';
console.log(toto);

Notez bien la différence, la ligne 1 contient maintenant une déclaration de variable. La valeur par défaut qui lui est affectée est ‘undefined’. C’est ce code qui est exécuté lors de la deuxième passe. L’affichage s’explique alors de lui-même.

 

Dernier point:

Les expressions de fonction ne sont pas « hoistées ». On doit donc les déclarer avant leur utilisation.

 

Publicités

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s