W języku JavaScript deklarowanie zmiennych może odbywać się za pomocą trzech słów kluczowych: var, let i const. Każde z tych słów kluczowych ma swoje zastosowanie i różni się od pozostałych w sposobie deklaracji i przypisywania wartości do zmiennych.
No dobra, bez zbędnego wstępu czy też wprowadzenia przechodzimy do konkretów. Dodam tylko, że różnice pomiędzy var, let i const często są mylone przez początkujących programistów JavaScript.
Czytaj także: Jak wygląda praca programisty?
var – deklaracja zmiennej globalnej lub lokalnej
Zmienna zadeklarowana za pomocą słowa kluczowego var może być zadeklarowana w dowolnym miejscu w kodzie i będzie miała zakres widoczności na poziomie funkcji lub globalnym. Można również zadeklarować tę samą zmienną wielokrotnie w różnych miejscach kodu, a każda z tych deklaracji będzie miała takie samo znaczenie.
Przykład 1:
function foo() {
var x = 10;
if (true) {
var x = 20;
console.log(x); // 20
}
console.log(x); // 20
}
foo();
W przypadku pierwszej deklaracji var x = 10, zmienna x ma zasięg widoczności wewnątrz funkcji foo(), a następnie w bloku if przypisywana jest jej nowa wartość 20. Wewnętrzna zmienna x jest widoczna również poza blokiem if, ponieważ jest ona zmienną globalną.
Przykład 2:
var x = 5;
for (var x = 0; x < 3; x++) {
console.log(x); // 0, 1, 2
}
console.log(x); // 3
W drugim przypadku, zmienna x jest zadeklarowana globalnie i później przypisywana w pętli for. W przypadku pętli for mamy wewnętrzną zmienną x, która jest inna niż zmienna globalna x, ale ponieważ deklaracja var nie ma zasięgu blokowego, to po zakończeniu pętli wartość zmiennej x na zewnątrz pętli jest zmieniona.
Przykład z var i hoistingiem
Przykład 3.
console.log(x); // undefined var x = 10;
W tym przykładzie, mimo że zmienna x jest deklarowana po wywołaniu console.log, nie otrzymujemy błędu, tylko wynik undefined. Jest to związane z mechanizmem hoistingu, który powoduje, że deklaracje zmiennych za pomocą var przesuwane są na początek zakresu widoczności.
Pojęciem hoistingu w JavaScript zajmę się w następnym wpisie. Pytania o hoisting bardzo często padają na rozmowach kwalifikacyjnych o pracę na stanowisko programisty JavaScript.
Przykład var z deklaracją bez słowa kluczowego
Przykład 4.
x = 10; console.log(x); // 10
W tym przykładzie, zmienna x jest deklarowana bez użycia słowa kluczowego var. W JavaScript takie rzeczy są możliwe. Za tego typu rzeczy wielu nie lubi tego języka. Deklarowanie w ten sposób nie jest zalecane. Główny zarzut, to możliwość przypadkowego zastępowania zmiennych globalne lub lokalne zmienne o takiej samej nazwie.
Czytaj także: Ile zarabia programista?
let – deklaracja zmiennej lokalnej
Zmienna zadeklarowana za pomocą słowa kluczowego let może być zadeklarowana tylko raz w danym zakresie widoczności (np. funkcji lub bloku). Zmienna zadeklarowana za pomocą let ma też zasięg blokowy, co oznacza, że jest widoczna tylko wewnątrz bloku, w którym została zadeklarowana.
Przykład 5. Jako przykład rozważymy identyczny przykład co z var (patrz Przykład 1). Jedyną różnicą będzie zastąpienie zmiennych var, zmiennymi let.
function foo() {
let x = 10;
if (true) {
let x = 20;
console.log(x); // 20
}
console.log(x); // 10
}
example();
W funkcji foo() definiujemy zmienną x i przypisujemy do niej wartość 10. Następnie, w bloku if, ponownie deklarujemy zmienną x za pomocą let i przypisujemy do niej wartość 20. W tym przypadku, zmienne x wewnątrz i na zewnątrz bloku if mają różne wartości, ponieważ zmienna zdefiniowana w bloku if ma zasięg ograniczony do tego bloku.
Przykład 6.
let x = 5;
for (let x = 0; x < 3; x++) {
console.log(x); // 0, 1, 2
}
console.log(x); // 5
W drugiej części kodu, deklarujemy zmienną x za pomocą let i przypisujemy do niej wartość 5. Następnie, w pętli for, ponownie deklarujemy zmienną x za pomocą let, która jest używana tylko wewnątrz pętli. W tym przypadku, ponieważ zmienna x wewnątrz pętli ma inny zakres widoczności niż zmienna x zadeklarowana na zewnątrz pętli, możemy bezpiecznie użyć tych samych nazw zmiennych. W wyniku tego, pętla wyświetla wartości od 0 do 2, a po wyjściu z pętli, zmienna x na zewnątrz pętli nadal ma wartość 5.
W efekcie, przy użyciu let, możemy bezpiecznie deklarować zmienne wewnątrz bloków i uniknąć problemów związanym z niemodyfikowalnym zasięgiem zmiennych w przypadku var.
Czytaj także: Jaka klawiatura dla programisty?
const – deklaracja stałej
Zmienna zadeklarowana za pomocą słowa kluczowego const jest stałą, co oznacza, że nie można zmienić jej wartości po zainicjowaniu. Zmienna zadeklarowana za pomocą const ma również zasięg blokowy tak jak let.
Przykład z const i niemożliwością zmiany wartości
const pi = 3.14; pi = 3.14159; // TypeError: Assignment to constant variable.
Jak widzimy w tym przykładzie, po zadeklarowaniu stałej pi z wartością 3.14, próba zmiany wartości tej stałej za pomocą operatora przypisania = kończy się błędem TypeError. Dzieje się tak, gdyż nie możemy nadpisywać wartości zmiennych, które zostały zadeklarowane za pomocą const.
