Czym jest hoisting w JavaScript?

Hoisting  jest zachowaniem w JavaScript, które pozwala na dostęp do zmiennych i funkcji przed ich zadeklarowaniem w kodzie. To unikalna cecha JavaScript, która może wprowadzać w błąd, ale zrozumienie jej działania jest kluczowe dla efektywnego programowania.

Hoisting zmiennych

W przypadku zmiennych deklarowanych za pomocą var, hoisting wynosi deklarację zmiennej na górę zakresu, w którym została zadeklarowana. Inicjalizacja zmiennej pozostaje jednak na swoim miejscu. Oznacza to, że można odwołać się do zmiennej przed jej fizycznym zadeklarowaniem w kodzie, ale do momentu inicjalizacji będzie ona miała wartość undefined.

console.log(myVar); // undefined, bo hoisting wynosi deklaracje na początek kodu
var myVar = "Hello, World!";
console.log(myVar); // "Hello, World!"

Hoisting funkcji

Hoisting funkcji działa podobnie do hoistingu zmiennych, ale z tą różnicą, że dotyczy całych deklaracji funkcji, nie tylko ich nazw. Oznacza to, że można wywołać funkcję przed jej zadeklarowaniem w kodzie.

myFunction(); // "Hello, World!" bo deklaracja funkcji
              //  automatycznie wyniesiona jest na początek kodu

function myFunction() {
    console.log("Hello, World!");
}

Hoisting a let oraz const

W przypadku let i const, hoisting również występuje, ale zmienne te są umieszczane w tzw. “temporal dead zone” (czasowej martwej strefie) od początku bloku aż do miejsca ich deklaracji. Oznacza to, że dostęp do nich przed deklaracją skutkuje błędem ReferenceError.

// console.log(myLet); // ReferenceError: Cannot access 
                       // 'myLet' before initialization
let myLet = "Hello, World!";

Dobre praktyki

• Unikaj hoistingu: Deklaruj zmienne na początku zakresu, aby uniknąć nieoczekiwanych wyników.
• Używaj let i const: Preferuj te słowa kluczowe zamiast var, aby zminimalizować ryzyko błędów związanych z hoistingiem.
• Deklaruj funkcje przed ich wywołaniem: Chociaż hoisting pozwala na wywołanie funkcji przed jej zadeklarowaniem, lepszą praktyką jest deklarowanie funkcji na początku zakresu lub przed ich pierwszym wywołaniem, aby kod był bardziej czytelny i łatwiejszy do zrozumienia.

Podsumowanie

Hoisting jest unikalnym mechanizmem w JavaScript, który pozwala na dostęp do zmiennych i funkcji przed ich deklaracją. Chociaż może być to przydatne, często prowadzi do nieoczekiwanych błędów i problemów z czytelnością kodu. Dlatego zaleca się stosowanie dobrych praktyk programistycznych, aby uniknąć problemów związanych z hoistingiem.

Jeżeli chcesz przyśpieszyć swoją naukę chciałbym polecić mój kurs video JavaScript w którym nauczysz się tego języka od podstaw do zaawansowanych jego koncepcji.