Même si vous ne connaissez pas le terme Hoisting, inconsciement vous faites peut-être avec tous les jours quand vous codez en JS.

Faisons un petit quizz:
Quizz 1:

plop();
function plop(){
    alert('coin');
}

Si vous exécutez ce code, quel est le résultat ?
'coin' / plop is not a function / ReferenceError: plop is not defined

Et maintenant pour ce code ?
Quizz 2:

plop();
var plop = function(){
    alert('coin');
};

Trouvé? Réponses:
Quizz 1: 'coin' Tester
Quizz 2: plop is not a function Tester (Voir l'erreur dans firebug)

Et si vous avez trouvé, avez vous une explication?

En voici une. En JavaScript les fonctions déclarées et les variables sont toujours déplacées(Hoisted) au début de leurs scope JavaScript par l'interpréteur.

Si on reprend le code du Quizz 1 après que l'interpréteur soit passé dessus:

function plop(){
    alert('coin');
}
plop();

La fonction déclarée et son contenu sont hoisted, rendant l'appel de la fonction accessible avant sa déclaration.

Pour le Quizz 2

var plop;
plop();
plop = function(){
    alert('coin');
};

La variable est hoisted, mais attention seulement la déclaration, la fonction n'est donc pas encore assignée au moment de l'appel, d'où l'erreur plop is not a function.

J'espère que la connaissance de l'hoisting vous permettra d'éviter certaines surprises en JavaScript.

Purée, mais JavaScript c'est de la merde ! J'avoue que de telles pensées de haine pure m'ont déjà envahit, dans d'intenses phases d'incompréhension devant mes scripts JS. Et je suis sûr que je ne suis pas le seul.

Continue reading