La portée des variables et le “Hoisting”

VAR

Les variables typées var :

1. ont une portée limitée seulement dans le cadre d’une fonction (ce n’est pas le cas dans les blocks if,for,foreach…)
2. si la fonction a accès au context extérieur via une variable (“closure”), celle ci peut être modifiée

var a = 'World'
var a = function (){
        console.log('Hello')
        a = 'Buddy'
        var b = function (){
               console.log(a)
        }
        return b()
}
a()

Sortie

 
Hello
Buddy

Hoisting

Le Hoisting (ou hissage) élève la déclaration des variables tout en haut de l’execution de notre script.

En effet, Javascript n’est pas executé de la même manière qu’on l’écrit.

Dans l’exemple précédant, si on retourne b() avant de définir celle-ci une erreur apparait à l’execution :

 
var a = 'World' 
var a = function (){ 
        console.log('Hello') 
        a = 'Buddy' 
        return b() 
        var b = function (){ 
                console.log(a) 
        } 
} 
a() 

Sortie

TypeError: b is not a function

En effet Javascript remanie le code en déclarant les variables en haut de la fonction (c’est l’action de Hoisting) :

 
var a 
a = 'World' 
a = function (){ 
    var b //Declare b
    console.log('Hello') 
    a = 'Buddy' 
    return b() //Call b which is undefined at this step -> Error
    var b = function (){ 
            console.log(a) 
    } 
} 

En revanche, si on n’assigne pas nos fonctions à des variables, javascript Hoist (hisse) la définition de la fonction :

 
function a (){ 
    console.log('Hello') 
    var a = 'Buddy' 
    return b() 
    function b (){ 
        console.log(a) 
    } 
} 
a()

devient …

 
function a (){
    var a 
	function b (){ 
        console.log(a) 
    } 
    console.log('Hello') 
    a = 'Buddy' 
    return b()   
} 
a()