Hoisting, windowanie co to jest? Jeżeli programowałeś bądź programujesz w języku JavaScript, to na pewno nie jednokrotnie zauważyłeś, że zmienna albo funkcja została wywołana przed jej zadeklarowaniem. W tym wpisie przedstawię przykłady działania windowania. Zapraszam 🙂
Hoisting zmienna
Hoisting, czyli po polsku windowanie, jest to proces, który podczas uruchomienia skryptu w javascript, przenosi wszystkie deklaracje zmiennej, funkcji na sam początek kodu, do globalnego zasięgu lub do zasięgu funkcji. Oznacza to, że możemy użyć zmiennej albo funkcji przed jej deklaracją w skrypcie. W sensie zmienna jest już zadeklarowana w linii 10, a my ją używamy w linii 2.
... console.log(nieZadeklarowanaZmienna); //ReferenceError: nieZadeklarowanaZmienna is not defined ...
Powyższy przykład pokazuje zachowanie skryptu, gdy używamy zmiennej, która w ogóle nie została zadeklarowana w kodzie.
... console.log(zadeklarowanaZmienna); //undefined var zadeklarowanaZmienna; zadeklarowanaZmienna = "Jestem zadeklarowana"; ...
Teraz widzimy, że komunikat zgłoszony w konsoli jest jako undefined (więcej na temat undefined) oznacza to, że zmienna została zadeklarowana w programie. Powyższy przykład po kompilacji skryptu i windowaniu wygląda tak:
... var zadeklarowanaZmienna; console.log(zadeklarowanaZmienna); //undefined zadeklarowanaZmienna = "Jestem zadeklarowana"; ...
Aplikacja wie, że zmienna zadeklarowanaZmienna jest zadeklarowana, ale nie przypisano do niej żadnej wartości. W następnej linii widać przypisaną wartość, ale to odbyło się po deklaracji zmiennej, a hoisting, czyli windowania przerzuca na samą górę tylko deklaracje zmiennych, to co się dzieje później, nie dotyczy windowania.
Jeżeli chcemy wyświetlić zawartość zmiennej zadeklarowanaZmienna, musimy po przypisaniu wartości do zmiennej wywołać funkcje console.log(zadeklarowanaZmienna) przykład:
... console.log(zadeklarowanaZmienna); // undefined var zadeklarowanaZmienna; zadeklarowanaZmienna = "Jestem zadeklarowana"; console.log(zadeklarowanaZmienna); // Jestem zadeklarowana ...
Można teraz pokusić się o pytanie: „a co się stanie, gdy podczas deklaracji zmiennej nadamy jej jednocześnie wartość początkową?” bardzo dobre pytanie 🙂 Otóż windowanie w JavaScript zadziała tak, że przeniesie na początek kodu deklaracje zmiennej, ale nie uwzględni jej wartości, która jest jednocześnie do niej przypisana, przykład:
... console.log(zadeklarowanaZmienna); // undefined var zadeklarowanaZmienna = "Jestem zadeklarowana"; ...
W powyższym przykładzie widać dokładnie, że „Jestem zadeklarowana” nie została zwindowana.
Po dodaniu console.log() zobaczymy, że zmienna posiada swoją przypisaną wartość, przykład:
... console.log(zadeklarowanaZmienna); // undefined var zadeklarowanaZmienna = "Jestem zadeklarowana"; console.log(zadeklarowanaZmienna); // Jestem zadeklarowana ...
Hoisting funkcja
Windowanie dla funkcji działa tak samo, jak dla zmiennej. Podczas kompilacji skryptu wszystkie deklaracje funkcji są przenoszone na początek kodu, przykład:
...
foo(); // Wywołanie funkcji foo()
function foo() {
console.log("Wywołanie funkcji foo()");
}
...
Co w przypadku kiedy do zmiennej przypisujemy funkcję? Windowanie zachowa się w identyczny sposób co, windowanie zmiennej z przypisaną wartością, zadeklarowana zmienna zostanie przeniesiona na samą górę bez wartości, to sam stanie się dla funkcji, zmienna zostanie przeniesiona na górę bez przypisanej funkcji, przykład:
...
barVar(); // ReferenceError: barVar is not defined
var barVar = function () {
console.log("Wywołanie funkcji bar()");
}
...
Podsumowanie Hoisting, windowanie – JavaScript
Zadeklarowana zmienna w skrypcie zostanie przeniesiona na samą górę kodu, ale bez przypisanej wartości. Dzięki temu możemy użyć zmiennej przed jej zadeklarowaniem. W tym wpisie to tyle mam nadzieje, że pomoże to w zrozumienie zagadnień związanych z JavaScript. Zachęcam do dzielenia się swoją opinią na temat wpisu, bloga itp. w komentarzach, każda uwaga jest dla mnie przydatna i ważna 🙂
Pozdro 🙂