Zakres funkcji i zakres bloku

Kiedy deklarujesz zmienną wewnątrz funkcji, zmienna jest związana wewnątrz funkcji i nie można uzyskać do niej dostępu poza funkcją. var jest słowem kluczowym do definiowania zmiennej dla dostępności w zakresie funkcji.

Teraz możesz zapytać, skoro daje błąd nawet jeśli używasz let lub const, dlaczego tylko var jest związane z zakresem funkcji? Rzecz w tym, że let i const są używane do definiowania zakresu bloku, a przed ES6, JavaScript nie miał zakresu bloku lub let i const.

Zakres bloku to obszar wewnątrz if, switch warunków lub for i while pętli. Mówiąc prościej , ilekroć widzisz {curly brackets}, jest to blok.

Zobaczmy przykład:

Teraz można by się spodziewać, że żadne z poleceń log nie powinno działać, ale jak widać tak nie jest var, zmienne zdefiniowane za pomocą var wewnątrz if, switch warunków lub pętli for i while mogą być dostępne globalnie i są częścią globalnego zakresu, a więc lepszą praktyką jest używanie z nimi let i const.

Lexical Scope

W końcu dotarliśmy do prawdziwego celu tego postu. Cóż, mogłem pominąć długą dyskusję na temat zakresu, ale osobiście uważam, że nie można zrozumieć zakresu leksykalnego bez znajomości kluczowych komponentów obracających się wokół niego.

Powtarzam, punkt do zapamiętania: Javascript ma leksykalny zakres z funkcjami scope.

W prostych słowach oznacza to, że zakres dzieci ma dostęp do zmiennych zdefiniowanych w zakresie nadrzędnym. Na przykład, jeśli miałbym zdefiniować funkcję i zadeklarować zmienną wewnątrz niej i wewnątrz tej samej funkcji, zdefiniować inną funkcję, to powinienem być w stanie użyć tej zmiennej wewnątrz wewnętrznej funkcji z powodu leksykalnego zakresu. Zobaczmy przykład:

Wyraźnie widać na przykładzie, że zmienne zadeklarowane w outerFunction() są dostępne przez innerfunction(), jest to leksykalne skalowanie.

Zakres zmiennych jest określony przez ich pozycję w kodzie. W celu rozwiązania zmiennych, JavaScript zaczyna od najbardziej wewnętrznego zakresu i szuka na zewnątrz, aż znajdzie zmienną, której szukał. W powyższym przykładzie JavaScript najpierw szuka zmiennej wewnątrz innerFunction(), a gdy jej nie znajdzie, wychodzi na zewnątrz tj. outerFunction()

Skalowanie leksykalne jest lepsze, ponieważ możemy łatwo dowiedzieć się o wartości zmiennej z kodu, podczas gdy w skalowaniu dynamicznym, znaczenie zmiennej może się zmienić w czasie wykonywania, co czyni je skomplikowanym do zrozumienia.

Więc, udało nam się zrozumieć, czym jest leksykalne określanie zakresu, teraz spójrzmy na zamknięcia, gdzie leksykalne określanie zakresu jest rzeczywiście używane.