Hoisting

JS

Generalnie hoisting to taki mechanizm w języku JavaScript, który polega na tym, że silnik JS wyszukuje wszystkie deklaracje zmiennych (i funkcji) w danej funkcji i przenosi je na początek kodu.

Innymi słowy jest to niejawne przenoszenie definicji na szczyt zakresu jej widoczności.

Windowaniu podlegają tylko deklaracje na początek kodu, bez ich wartości.

PRZYPADEK 1

console.log(a); 
var a= 5; 

Czyli dzieje się tak: silnik najpierw analizuje kod i dokonuje hositingu (wyniesienie na górę kodu deklaracji zmiennych i funkcji)

var a
console.log(a);
a= 5;  

PRZYPADEK 2

console.log(a); 
var a= 5; 

function one() {
console.log(b);
var b= 10;
}


one();

Najpierw hoistingowi ulegają funkcje potem deklaracja zmiennej. Funkcje mają priorytet.

function one() {
var b 			 //  deklaracja wyniesiona na górę
console.log(b);
b= 10;
}


var a 			//  deklaracja zmiennej
console.log(a); 	//  metoda log
a= 5 			//  inicjalizacja
one(); 			//  wywołanie naszej funkcji

PRZYPADEK 3

W JavaScript funkcje tworzymy najczęściej na dwa sposoby: poprzez bezpośredni zapis (deklaracja funkcji) lub przez wyrażenie funkcyjne:

function mathOperations (a,b) { 
return a + b; 
};


var mathOperations = function (a,b) { 
return a + b; 
};

W jaki sposób różnią się te dwa zapisy podczas hoistingu?

(function () {
    var mathOperations = function (a,b) { 
    return a + b }
    
    
    function mathOperations (a,b) {
    return a * b }
    
    
    return mathOperations (3,3);
})();

Jaki będzie wynik 6 czy 9 ? Otóż 6.

W pierwszej kolejności przenoszone są definicje funkcji, a dopiero później następuje hoisting zmiennych deklarowanych przez var.

Czyli najpierw wykonuje się funkcja mnożącą dwa argumenty, ale za chwilę nadpisujemy ją wyrażeniem funkcyjnym sumującym liczby. Ostatecznie otrzymujemy funkcję sumującą argumenty a + b.