let vs const vs var
const i let mają zasięg blokowy, a var funkcyjny. const nie pozwala na ponowne przypisanie. W nowym kodzie pisz const, a let tylko dla zmieniających się wartości.
Porównanie w tabeli
#Zasięg
Ponowne przypisanie
Ponowna deklaracja w tym samym zasięgu
Odwołanie przed deklaracją
Wartość przy deklaracji
Zmienna w pętli z callbackiem
Kiedy używać
Przykład
#const course = 'JavaScript'
let level = 1
level = level + 1
if (level > 1) {
var visible = 'var widać poza blokiem'
let hidden = 'let istnieje tylko w bloku'
}
console.log(course, level)
console.log(visible)
console.log(typeof hidden)Definicja i zastosowanie
#Wszystkie trzy słowa kluczowe deklarują zmienne, ale różnią się zasięgiem, możliwością ponownego przypisania i zachowaniem przed deklaracją. let i const weszły do języka w ES2015 i mają zasięg blokowy: istnieją tylko w nawiasach klamrowych, w których je zadeklarowano. var ma zasięg funkcji, więc wychodzi poza bloki if i pętle.
const nie pozwala przypisać zmiennej nowej wartości, ale nie zamraża obiektu: do tablicy zadeklarowanej przez const nadal dodasz element. let pozwala na ponowne przypisanie. Do miejsca deklaracji obie są w tzw. strefie martwej (temporal dead zone), więc odwołanie do nich wcześniej rzuca ReferenceError. Deklaracja var jest wynoszona na początek funkcji (hoisting) i do czasu przypisania ma wartość undefined.
Praktyczna zasada: domyślnie const, let tylko dla wartości, które naprawdę się zmieniają (liczniki, sumy w pętli), a var wcale. Spotkasz go w starszych projektach i w starych odpowiedziach na forach, więc warto rozumieć, czym się różni.
Składnia
#const name = value
let name = value
var name = valueWięcej przykładów
#const skills = ['HTML']
skills.push('CSS')
console.log(skills)
try {
skills = []
} catch (error) {
console.log(error.name)
}Zmieniać możesz zawartość tablicy lub obiektu, ale nie samo przypisanie. Do zamrożenia obiektu służy Object.freeze().
for (var i = 0; i < 3; i++) {
setTimeout(() => console.log('var', i), 0)
}
for (let j = 0; j < 3; j++) {
setTimeout(() => console.log('let', j), 0)
}Wszystkie funkcje z pierwszej pętli widzą tę samą zmienną i, która po pętli ma wartość 3. let tworzy nową zmienną w każdej iteracji.
try {
console.log(points)
let points = 10
} catch (error) {
console.log(error.name)
}
console.log(bonus)
var bonus = 5Dobre praktyki
#- Zacznij od
consti zmień naletdopiero wtedy, gdy edytor lub linter zgłosi próbę ponownego przypisania. - Reguły ESLint
prefer-constino-varpilnują tej zasady w całym projekcie. - Zasięg blokowy
leticonstdotyczy każdego bloku:if, pętli,tryi samodzielnych nawiasów klamrowych.
Powiązane hasła
#- constDeklaruje stałą o zasięgu blokowym. Takiej zmiennej nie można ponownie przypisać wartości.
- letDeklaruje zmienną o zasięgu blokowym, której wartość można później zmienić.
- varDeklaruje zmienną o zasięgu funkcji. To starszy sposób, dziś zastąpiony przez let i const.
- forPętla z licznikiem: inicjalizacja, warunek i krok. Powtarza blok kodu, dopóki warunek jest prawdziwy.
Widzisz błąd albo brakuje przykładu? Napisz do nas.