EcmaScript 6 ES6 (później nazwany es2015) dziś skupię się na dwóch nowościach wprowadzonych do języka JavaScript oraz poruszę użyteczność tych dwóch elementów które służą do zdefiniowania zmiennych, a mowa o let i const. Do tego wspomnę jeszcze o var. Wszystkie trzy słowa kluczowe służą do tego samego, lecz każda ma swoje unikalne działanie, zapraszam 🙂
Można się zastanowić i zapytać, po co nam let i const otóż chodzi o zasięg jakim dysponuje zadeklarowana zmienna.
var
Var działa tak, że ma zasięg globalny przez co, jest widoczna wszędzie.
|
1 2 3 4 5 |
for(var i = 0; i < 5; i++) { console.log(i); // 0 1 2 3 4 } console.log(i) // 5 |
Jak widać wyżej, zmienna i pomimo, że była zadeklarowana w pętli to po za nią dalej istnieje i ma się dobrze. Chcielibyśmy aby zadeklarowana zmienna istniała tylko na potrzebę pętli, aby tego dokonać można użyć let
Let
|
1 2 3 4 5 |
for(let i = 0; i < 5; i++) { console.log(i); // 0 1 2 3 4 } console.log(i) // ReferenceError: i is not defined |
Dzięki swojemu zasięgowi blokowemu let po wyjściu z pętli przestaje istnieć, tak jak tego oczekiwaliśmy. Let to po prostu odpowiednik var z zasięgiem blokowym.
Poniższy przykład ładnie pokazuję zasięg let:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
function temp (){ let x = 5; console.log(x); // 5 for(let i = 0; i < 1; i++){ let x = 2; console.log(x); //2 if (true) { let x = 3; console.log(x); // 3 } console.log(x); // 2 } console.log(x); // 5 } |
|
1 2 3 4 5 6 7 8 9 10 11 |
function temp (){ let x = 5; // ojciec console.log(x); // 5 if (true) { let y = 2; // dziecko console.log(y); // 2 console.log(x); // 5 } console.log(x); // 5 console.log(y); // ReferenceError: y is not defined } |
Jak widać w powyższych przykładach zmienna zadeklarowana jako ojciec jest widoczna u potomka oraz u ojca, zaś zmienna zadeklarowana u dziecka jest widoczna tylko u dziecka, ale u ojca nie jest widoczna.
Const
Const jest tak samo ograniczona zasięgiem jak let ale różni się tym, że deklarując zmienną typy const musi być zainicjalizowana a po drugie takiej zmiennej później w programie nie można zmieniać, nie można do niej przypisywać innych wartości.
|
1 2 3 4 5 6 7 8 9 10 11 |
function temp (){ const x = 5; console.log(x); // 5 if (true) { const y = 2; console.log(y); // 2 console.log(x); // 5 } console.log(x); // 5 console.log(y); // ReferenceError: y is not defined } |
Powyższy przykład pokazuję, zasięg const, poniższy pokaże, że nie wolno zmieniać zmiennej typu const:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
function temp (){ const x = 5; console.log(x); // 5 if (true) { const y = 2; console.log(y); // 2 console.log(x); // 5 y = 4; // SyntaxError: Assignment to constant variable: y. Po tym błędzie aplikacja nie idzie dalej. x = 9; // SyntaxError: Assignment to constant variable: x console.log(y); console.log(x); } x = 9; // // SyntaxError: Assignment to constant variable: x console.log(x); // 5 console.log(y); // ReferenceError: y is not defined } |
Pozdro 🙂