Podnoszenie JavaScript: co musisz wiedzieć

Jeśli pracowałeś z JavaScript przez jakiś czas, prawdopodobnie słyszałeś termin „podnoszenie”. W rzeczywistości dla ankieterów jest to jedno z pojęć, o które lubią pytać, ponieważ pokazuje poziom zrozumienia języka JavaScript przez kandydata. Jednak co dokładnie oznacza podnoszenie i jak wpływa na Twój kod? W tym artykule przeprowadzę Cię przez to, co musisz o tym wiedzieć i jaki ma wpływ na Twój kod.

Przede wszystkim spójrzmy na językowe znaczenie tego terminu, zanim przejdziemy do jego technicznego użycia. Podnoszenie jest po prostu używane w odniesieniu do aktu podnoszenia lub ciągnięcia czegoś, zwykle za pomocą lin lub kół pasowych. Usłyszysz stwierdzenia typu „zarzuciła plecak na ramię”, „podniosła flagę”, „ładunek został podniesiony na statek” i tak dalej. Inne słowa określające podnoszenie obejmują podnoszenie lub wspinanie się.

W odniesieniu do języka JavaScript „podnoszenie” odnosi się do zachowania, w którym interpreter automatycznie przenosi deklaracje zmiennych lub funkcji na początek zakresu ich zawartości przed ich wykonaniem. Oznacza to, że zanim zmienna lub funkcja zostanie zadeklarowana w twoim kodzie, nadal możesz jej używać.

Rozważmy na przykład następujący kod:

Linia var x = 10 ma w sobie dwie akcje:

1. Deklaracja zmiennej „var”.
2. Przypisanie zmiennej „=”.

Co ciekawe, należy zauważyć, że podnoszenie dotyczy tylko deklaracji, a nie przypisań lub inicjalizacji. W powyższym przykładzie wartość x jest niezdefiniowana, gdy jest rejestrowana w konsoli, ponieważ przypisanie do 10 jeszcze nie nastąpiło.

Aby lepiej to zrozumieć, przyjrzyjmy się, jak to zachowanie jest prezentowane przez funkcje.

W powyższym przykładzie można zauważyć, że nawet jeśli funkcja została wywołana przed jej zadeklarowaniem, kod nadal działał poprawnie i po zalogowaniu dał nam poprawne wyrażenie. Niezależnie od tego, czy funkcja została zadeklarowana przed wywołaniem, czy odwrotnie, zachowanie pozostaje takie samo. Interpreter JavaScript przechwycił deklarację funkcji i umieścił ją na górze zakresu przed jej wykonaniem. To tak, jakby kod wyglądał tak:

Z drugiej strony rozważmy, jak działa podnoszenie z funkcją anonimową lub funkcją przypisaną do zmiennej. Przykład tego pokazano na poniższym przykładzie:

Jak widać, powyższy kod spowodował błąd. Podnoszenie nie obsługuje przypisania, co jest wspomnianym wcześniej wyjaśnieniem, dlaczego tak jest. Wyrażenie znane jako „natychmiastowo wywoływane wyrażenia funkcyjne” to innowacyjne podejście do wykonywania anonimowej funkcji (w skrócie IIFE).

Równie ważne dla zachowania hostingu w zmiennych JavaScript są dwa słowa kluczowe „let” i „const”, które są również używane do deklaracji zmiennych, takich jak „var”. W przeciwieństwie do ich odpowiedników „var”, wartość zmiennej zadeklarowanej za pomocą „let” lub „const” nie jest podnoszona. Jeśli spróbujesz uzyskać dostęp do wartości któregokolwiek z nich, zanim zostanie zadeklarowany, otrzymasz wyjątek ReferenceError, jak pokazano na poniższych ilustracjach.

Podczas korzystania z podnoszenia jednym z częstych błędów popełnianych przez wielu programistów jest zakładanie, że wartość zmiennej jest zawsze inicjowana jako niezdefiniowana. Jest to jednak poprawne tylko dla zmiennych, które mają w swojej deklaracji słowo kluczowe „var”. Każda próba uzyskania dostępu do zmiennej, która została zadeklarowana za pomocą „let” lub „const” przed przypisaniem, zakończy się błędem ReferenceError. Nowoczesne najlepsze praktyki kodowania zdecydowanie zalecają unikanie używania „var” na korzyść „let” i „const”, ponieważ zapewniają one lepszą ochronę przed niezamierzonymi lub przypadkowymi zmianami zmiennych.

Podsumowując, podnoszenie jest ważną koncepcją w JavaScript, która może mieć duży wpływ na Twój kod. Pamiętaj o tym podczas pisania i debugowania programów, aby uniknąć niejasności lub nieoczekiwanego zachowania, jakie może przynieść. Generalnie dobrą praktyką jest deklarowanie wszystkich zmiennych na górze zakresu. To nie tylko sprawi, że Twój kod będzie łatwiejszy do zrozumienia, ale także prosty w utrzymaniu.