W JavaScript możemy deklarować zmienne za pomocą tych trzech słów kluczowych var, let, const. Każde z tych słów kluczowych zachowuje się inaczej w zależności od sposobu ich użycia. Na tym blogu podzielę się swoją wiedzą na temat zmiennych.

Zanim przejdziemy dalej, najpierw przypomnijmy sobie cykl życia silnika i silnika Javascript. (W skrócie silnik javascript to program komputerowy, który kompiluje kod javascript do natywnego kodu maszynowego i wykonuje go).

Fazy ​​silnika JavaScript

Gdy silnik javascript wykonuje kod globalny, tworzy konteksty wykonania. Każdy kontekst wykonania ma dwie fazy: fazę tworzenia i fazę wykonywania.

Faza tworzenia:
kompilator przechodzi przez cały kod 2 razy przed wykonaniem

1. W pierwszym uruchomieniu pobiera wszystkie deklaracje funkcji i przechowuje je w pamięci wraz z ich referencjami.
2. W drugim przebiegu wybiera wszystkie zmienne.

Cykl życia zmiennej JavaScript

Kiedy silnik pracuje ze zmiennymi, ich cykl życia składa się z następujących faz:

• Faza deklaracji polega na zarejestrowaniu zmiennej w zakresie.
• Faza inicjalizacji to przydzielenie pamięci i utworzenie powiązania dla zmiennej w zakresie. Na tym etapie zmienna jest automatycznie inicjowana za pomocą undefined.
• Faza przypisania polega na przypisaniu wartości do zainicjowanej zmiennej.

1. Faza deklaracji, zmienna foo jest rejestrowana i dodawana do łańcucha zasięgu (w naszym przypadku zasięg globalny)
2. Faza inicjalizacji , fooinicjowana za pomocą undefined.
3. faza ssignment, jest przypisany zmiennej . 4foo

Cykl życia Var

Rozumiemy, co mówi diagram na przykładzie:

• Po uruchomieniu kodu rozpoczyna się faza tworzenia silnika javascript . Widzi tylko zmienne i deklaracje funkcji . Więc przeskakuje console.log w pierwszej linii .
• W linii 2 znajduje się deklaracja zmiennej dla zmiennej, foo a ponieważ jest zadeklarowana za pomocą var, zmienna przechodzi fazę deklaracji i od razu fazę inicjalizacji.
• Po fazie inicjalizacji zmienna jest inicjowana w zakresie. fooundefined
• Teraz rozpoczyna się faza wykonywania silnika javascript . W fazie wykonania kod wykonywany jest linia po linii.
• W linii 1 widzi console.log(foo), że aktualna wartość foojest undefinedtak , że loguje undefined.
• W linii 2 następuje przejście do fazy przypisania zmiennej i przypisanie wartości do 4 foo.

Zobaczmy, co się stanie, jeśli użyjemy tego samego przykładu ze letsłowem kluczowym

• W przypadku zmiennej zadeklarowanej za pomocą let, w fazie tworzenia uruchamiana jest tylko faza deklaracji zmiennej i zmienna foojest zarejestrowana w zakresie, ale nie jest zdefiniowana.
• Gdy faza wykonania jest uruchomiona, kod wykonuje wiersz po wierszu, w wierszu 1 widzi go console.log(foo) i wykonuje.
• Silnik JavaScript zaczyna szukać w foo zdefiniowanym zakresie, ale nie znajduje, więc zgłasza błąd. Dzieje się tak, ponieważ foojest niezainicjowany. fooznajduje się w czasowej martwej strefie .

W przypadku const, wszystko dzieje się tak samo, letz wyjątkiem jednej rzeczy.
Faza inicjalizacji i faza przypisania przebiegają razem. Wymagany jest inicjator dla a ; oznacza to, że musisz określić jego wartość w tej samej instrukcji, w której jest zadeklarowana (co ma sens, biorąc pod uwagę, że nie można jej później zmienić). const

Podnoszenie

Hoisting to mechanizm JavaScript, w którym zmienne i deklaracje funkcji są przenoszone na szczyt ich zakresu przed wykonaniem kodu. Są one umieszczane w pamięci podczas fazy tworzenia, ale pozostają dokładnie w miejscu, w którym je wpisałeś w swoim kodzie.

Czasowa martwa strefa (TDZ)

TDZ to termin opisujący stan, w którym zmienne są nieosiągalne. Znajdują się w zakresie, ale nie są inicjowane.

TDZ dotyczy jedynie let, consta class sprawozdanie i, tak, oni są wywieszono też. Aby udowodnić, że widzisz przykład:

Powyższy kod jest dowodem, że foo zarejestrowany i dodany do zakresu, innymi słowy, podniesiony powyżej miejsca, w którym został zadeklarowany. Silnik wie foo, że istnieje (jest zadeklarowany), ale nie możemy uzyskać do niego dostępu przed jego zainicjowaniem.

Wniosek

Wiedza o tym, co dzieje się pod maską silnika javascript (w naszym przypadku ze zmiennymi), da ci pewność co do tego, co za jego pomocą zbudujesz, i zapewni, że będziesz używał języka mądrzej.