Hoisting czyli windowanie w JavaScript

Hoisting, windowanie – JavaScript

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.

Powyższy przykład pokazuje zachowanie skryptu, gdy używamy zmiennej, która w ogóle nie została zadeklarowana w kodzie.

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:

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:

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:

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:

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:

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:

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 🙂
 

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

*