Zakres lokalny vs zakres globalny w JavaScript

Kolejnym tematem, który musisz poznać w celu nauczenie się podstaw programowania w języku JavaScript będzie temat zakresu zmiennych oraz stałych w JavaScript. Mamy 2 rodzaje zakresu zmiennych i stałych, jest to zakres lokalny oraz zakres globalny. Przejdźmy od razu do przykładu:

function hello() {
    let message = 'Hello World';
    return message;
}
hello();
console.log(message); //ReferenceError: message is not defined

Została zadeklarowana funkcja hello(), która ma w ciele zadeklarowaną zmienną message oraz zwraca wartość tej zmiennej. Poniżej, następuje wywołanie metody oraz wyświetlenie w konsoli wartości zmiennej message. Przy próbie wyświetlenia wartości zmiennej, otrzymaliśmy błąd mówiący o tym, że zmienna message nie została zdefiniowa. Jak to? Przecież zmienna była wcześniej deklarowana? Nie do końca. Faktycznie zmienna była wcześnie deklarowana, ale zmienna ta była deklarowana w ciele funkcji, co oznacza że tylko tam jest dostępna. Jest to przykład tak zwanej zmiennej lokalnej, czyli dostępnej tylko w bloku kodu, gdzie została zadeklarowana. Nie widoczna poza tym blokiem. Zmienne let oraz stałe const mają zasięg lokalny W przypadku deklarowania zmiennych i stałych za pomocą słowa kluczowego var, sytuacja wygląda nieco inaczej ale o tym będę pisał w kolejnym artykule, z którym warto się zapoznać. Na razie skupmy się tylko na zmiennych let oraz stałych const, bo deklarowanie zmiennych oraz stałych za pomocą tych słów kluczowych jest zalecane od wprowadzenia ES6.

Zastawiasz się na pewno, co można zrobić aby zmienna ta była dostępna również poza blokiem tej funkcji, należy użyć wtedy zmiennej globalnej.

let message;
function hello() {
    message = 'Hello World';
    return message;
}
hello();
console.log(message); //Hello World

Jak widzisz, tym razem gdy użyliśmy zmiennej globalnej napis wyświetlił się w prawidłowy sposób. To, że w tym wypadku osiągnęliśmy zamierzony cel wcale nie oznacza że wszędzie powinniśmy używać zmiennych globalnych. Wręcz przeciwnie, bardziej zalecane jest używanie zmiennych lokalnych. Wartość zmiennej globalnej może zostać zmieniona przez jakiś blok wewnętrzny np. pojedyńczej funkcji i przez to mogą często występować jakieś trudne do zweryfikowania błędy w programach. Przedstawię Ci to na przykładzie:

let course = 'JavaScript';

function hello() {
    let message = 'Hello World';
    let course = 'C#';
    console.log(message);
    console.log(course);
}
hello();
//Hello World
//C#

Pisałem o tym, że blok wewnętrzny może być częścią funkcji, blok ten również może być częścią pętli lub instrukcji warunkowej.

function hello() {
    let message = 'Hello World';

    if (message) {
        let course = 'JavaScript';
    }

    console.log(course);
}
hello(); //ReferenceError: course is not defined

Zmienna course zadeklarowana w instrukcji warunkowej if, jest widoczna tylko w tym pojedyńczym, lokalnym bloku, nie jest widoczna poza tym blokiem.

function hello() {
    let message = 'Hello World';

    for (let i = 0; i < 3; i++){
        console.log(i);
    }

    console.log(i);
}
hello(); 
//0
//1
//2
//ReferenceError: i is not defined

To samo dotyczy zmiennych zadeklarowanych w pętlach, są one widoczne tylko w bloku pętli.

To wszystko co chciałem Ci przekazać w tym artykule. Zapraszam Cię do kolejnych artykułów z serii podstaw programowania w języku JavaScript.

Poprzedni artykuł - Funkcje strzałkowe w JavaScript.
Następny artykuł - Let vs var w JavaScript.

Blog Dla Młodszych Programistów C#/.NET

Zakres lokalny vs zakres globalny w JavaScript

Dodaj komentarz

Wyszukiwarka

Tagi

Najnowsze artykuły

Losowe artykuły