EcmaScript 6 var, let, const

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.

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

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:

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
}

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.

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:

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 🙂