Poradniki Programowanie

JavaScript: var, let, const – kiedy i jak używać?

Pinterest LinkedIn Tumblr

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?

  1. var w JavaScript
  2. let w JavaScript
  3. const w JavaScript

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.

Od ponad 5 lat dzielę się swoją wiedzą na temat elektroniki użytkowej. Tworzę poradniki technologiczne rozwiązujące realne problemy napotykane podczas użytkowania sprzętu. Recenzuję elektronikę taką jak routery, audio, smartfony, laptopy itp.

Skomentuj