le Hoisting

Le HOISTING en
JAVASCRIPT
INTERNET
J.B. Dadet DIASOLUKA Luyalu Nzoyifuanga
+243 - 851278216 - 899508675 - 991239212 - 902263541 – 813572818
Le « Hoisting » en JavaScript
JavaScript est un langage initialement inventé pour faciliter la programmation même
des plus novices (à l’origine il n’était pas destiné comme langage de grandes
applications, mais seulement langage de script, c’est-à-dire juste pour faire des
requêtes à des dispositifs, animer les pages Web). Il devait donc être un langage
intelligent pouvant corriger lui-même la plupart des fautes et faiblesses de
programmation rencontrées dans un code source (syntaxe, oubli des points virgules,
accéder à une variable déclarée après son utilisation, pouvoir affecter une valeur à
une variable non déclarée, ou appeler une fonction déclarée après sa première
invocation…).
Pour les variables et fonctions non déclarées explicitement avant leur utilisation,
JavaScript déplace automatiquement leur déclaration juste au début de leur scope,
pendant la phase de parsing, pour pouvoir les reconnaître. Mais cette déclaration
automatique n’est pas accompagnée d’initialisation. La déclaration de la variable ainsi
déplacée automatiquement au début du scope par JavaScript aura donc la valeur
« undefined ».
Quelle différence y-a-t-il entre déclaration, définition, et initialisation ?
Déclaration d’une variable : on demande au compilateur ou au « browser engine »
ou à l’interpréteur de réserver un espace-mémoire pour tel type de données, le type
de donnée détermine la taille de l’espace à réserver. L’espace ainsi alloué est identifié

Dr DIASOLUKA NZ. Luyalu – Ophtalmologiste & Informaticien jeudi 29 août 2019 (4:48 PM)
Le HOISTING en JAVASCRIPT Page 2 sur 19
par le nom d’une variable qui garde son adresse-mémoire. En JavaScript standard le
type d’une variable (donc le type de donnée que l’adresse est censée recevoir) est
interconvertible.
Définition d’une variable : Au moment-même de la déclaration, on place
explicitement une valeur initiale dans la cellule-mémoire ainsi réservée. Si on
n’initialise pas la variable, JavaScript lui attribue automatiquement la valeur
temporaire (définitivement provisoire, mais pouvant aussi être provisoirement
définitive) « undefined ». Étant une variable, vous pouvez à tout moment modifier sa
valeur.
Initialisation : Valeur [initiale] à partir de laquelle vous voulez que le programme
utilise la variable avant, par exemple dans une boucle (valeur initiale de la variable
compteur d’itérations dans la boucle), mais aussi dans le corps du programme (valeur
initiale de la variable par exemple telle que spécifiée lors de la déclaration/définition).
Scope : Le scope c’est la partie du programme dans laquelle la variable est
vivante/existante et éventuellement accessible (non cachée).
Ci-dessous, portée, visibilité et accessibilité de la variable globale « v » dans une
fonction.
<script type="text/javascript">
var v="globale";
function fct(){
console.log(`Portée, visibilitéde et accessibilité de la Variable globale v «
${v} »`);
}
fct();
</script>
Ci-dessous, portée, mais non visibilité directe, mais aussi Accfessibilité de la variable
globale « v » dans une fonction.
<script type="text/javascript">
var v="globale";
function fct(){
var v="Locale";
console.log(`Portée`); // Portée

Dr DIASOLUKA NZ. Luyalu – Ophtalmologiste & Informaticien jeudi 29 août 2019 (4:48 PM)
Le HOISTING en JAVASCRIPT Page 3 sur 19
console.log(`mais non visibilité directe de la Variable globale v « ${v} »`);
// mais non visibilité directe de la Variable globale v « Locale »
console.log(`Accessibilité de la Variable globale v « ${self.v} »`);
// Accessibilité de la Variable globale v « globale »
}
fct();
</script>
Portée : Scope.
Visibilité : Partie du scope de la variable où elle est directement accessible (visible)
par simple invocation de son nom.
Accessibilité : Partie du programme à partir de laquelle quand la variable est
référencée elle peut être atteinte (accessible) par une voie ou une autre.
Le Hoisting :
Le Hoisting est un mécanisme de fonctionnement du JavaScript qui s’assigne à
exécuter le code même quand une variable « var » est explicitement déclarée mais
après sa lecture. JS le fait en déplaçant [seulement] la déclaration de la variable (à
l’exception de la valeur d’initialisation) ou la définition de la fonction au tout début de
leur scope.
Les variables « let » et « const », introduites en JavaScript dans les versions
ultérieures, ne sont pas concernées par le « hoisting ».
Rappels :
I. Les variables « var » ont une portée fonction ,
<script type="text/javascript">
function fct(){
var v = 2019; // Portée et visibilité fonction.
console.log(v); // 2019
}
fct();

Dr DIASOLUKA NZ. Luyalu – Ophtalmologiste & Informaticien jeudi 29 août 2019 (4:48 PM)
Le HOISTING en JAVASCRIPT Page 4 sur 19
console.log(v); // ReferenceError: v is not defined
</script>
II. Les types de variables « let » et « const » ont une portée « n’importe quel
bloc » = « ANY BLOC » , ce qui leur permet de ne pas avoir besoin qu’on leur
crée une fonction à exécution immédiate pour être temporaires.
<script type="text/javascript">
{ // ANY BLOCK.
var v = "19h41";
const c = 26;
let l = 8;
}
console.log(v); // 19h41
console.log(c); // ReferenceError: c is not defined
console.log(l); // ReferenceError: l is not defined
</script>
Portée d’une variable « var » d’une fonction à exécution immédiate :
Elle se limite naturellement au bloc de la fonction.
<script type="text/javascript">
(function(){ // Fonction imm&édioatement invoqauée
var v = "19h41";
}());
{ // ANY BLOCK.
const c = 26;
let l = 8;
}
console.log(v); // ReferenceError: v is not defined
console.log(c); // ReferenceError: c is not defined
console.log(l); // ReferenceError: l is not defined
</script>
Nous utilisons ici le navigateur
Firefox Browser NIGHTLY, version 70.0a1 (2019-08-22) (64 bits)
I. Lecture d’une variable non préalablement déclarée :

Dr DIASOLUKA NZ. Luyalu – Ophtalmologiste & Informaticien jeudi 29 août 2019 (4:48 PM)
Le HOISTING en JAVASCRIPT Page 5 sur 19
<script type="text/javascript">
console.log(age);
</script>
ou
<script type="text/javascript"> "use strict";
console.log(age);
</script>
II. Affectation à une variable non préalablement déclarée :
<script type="text/javascript">
// JS standard déclare automatiquement la variable avant l'affectation
age=34;
console.log(age); // 34
</script>
ou
<script type="text/javascript"> "use strict";
// JS stricte exige la déclaration erxplicite
age=34;
console.log(age); // 34
</script>
III. Accéder à une variable déclarée après son utilisation :
<script type="text/javascript">
// La fonction appelée est déclarée/définie plus loin
fct();
function fct(){
console.log(age); // undefined
var age=24; // Ici intervient le Hoisintg.
// Variable déclarée après sa 1ère utilisation.
}
</script>
ou