• Postoje tri nacina da se deklarise varijabla: let, const i var.
• const i let su se pojavili sa ES6 u 2015. godini, dok se var koristio od ranih dana JavaScript-a.
• Razlika izmedju cont i let je ta da je vrijednost const varijable nepromjenjiva. let varijabla nije jednako striktna i ona ce prihvatiti drugu vrijednost ako joj je dodijelimo, kao i var varijabla.
• Osim toga, varijable deklarisane sa kljucnom rijeci const se ponasaju kao i let. Ono sto vazi za jednu, vazi i za drugu kljucnu rijec.

const poruka = true;
poruka = false; 
// Uncaught TypeError: Assignment to constant variable.
// Cannot assign to "poruka" because it is a constant

Iako u vecini slucajeva mozemo zamijeniti let i var i ocekivati da kod radi, princip rada se razlikuje. let se cesce koristi u modernijim skriptama jer var predstavlja njegovog prethodnika, dok drugi misle da var i dalje moze imati znacajnu ulogu u pisanju kvalitetnog i jednostavnijeg koda.

"var" i "let" opseg

var varijable imaju opseg funkcije ili globalni opseg ako su definisane izvan funkcije, ali su vidljive kroz blokove {}, uslovne izjave (if) i petlje (while i for loops). U primjeru ispod var varijabla ne bi bila vidljiva u globalnom opsegu da se nalazi u funkciji. Sa druge strane, let varijabla ima opseg bloka {} (bilo kojih viticastih zagrada).

Opseg se odnosi na trenutni kontekst koda, koji odredjuje dostupnost varijabli u JavaScript-u. Vise o ovim konceptima u closures i execution context clancima.

{
  var poruka = true;
  let email = 'email@email.com';
}

console.log(poruka); // true
console.log(email); 
// Uncaught ReferenceError: email is not defined

var varijabla je vidljiva kroz blokove jer nekada u JavaScript-u blokovi nisu imali leksicka okruzenja.

function brojanje() {
  for(var i = 0; i < 10; i++) {
    console.log(i); // 1 2 3 4 5 6 7 8 9
  }
  console.log(i); 
  // 10
}

brojanje();

U sledecem primjeru varijabla i je dostupna samo unutar for petlje jer je deklarisana sa kljucnom rijeci let.

function brojanje() {
  for(let i = 0; i < 10; i++) {
    console.log(i); // 1 2 3 4 5 6 7 8 9
  }
  console.log(i);
  // Uncaught ReferenceError: i is not defined
}

brojanje();

Hoisting varijabli

U prevodu hoisting znaci podizanje, a odnosi se na proces kojim JavaScript engine podize deklaracije varijable na vrh njihovog opsega, prije izvrsenja koda. Posljedicno se deklaracije mogu napisati nakon sto je varijabla koristena ili joj je vrijednost dodijeljena.

function ispisImena() {
  ime = "Ana";

  console.log(ime); // Ana

  if (false) { 
    var ime; // var je funcijskog opsega
  }
}
ispisImena();

Je isto kao i:

function ispisImena() {
  var ime;
  ime = "Ana";

  console.log(ime); // Ana
}

ispisImena();

Iako su deklaracije podignute, dodijeljene vrijednosti nisu. var varijable imaju undefined vrijednost do linije u kojoj joj je dodijeljena = neka druga.

function ispisImena() {
  console.log(ime); // undefined

  var ime = 'Ivan';
}

Sve ovo ovo ne vazi i za let varijable. Iako se podizu na vrh bloka i JavaScript engine je svjestan da su tu, one imaju neinicijalizovano stanje i nalaze se u privremenoj mrtvoj zoni (temporal dead zone) sve do deklaracije varijable — gotovo kao da varijabla ne postoji.

let ime = 'Marko';

function ispisiIme() {
  console.log(ime); 
  // ReferenceError: 
  // Cannot access 'ime' before initialization
  let ime = 'Ian'; 
}

ispisiIme();

console.log(nepostojecaVarijabla);
// Uncaught ReferenceError: 
// nepostojecaVarijabla is not defined

Ponovno deklarisanje

Ponovno deklarisanje let varijable u istom opsegu nije dozvoljeno.

var email;
var email; // radi 👍

let poruka;
let poruka; 
// SyntaxError: 'poruka' has already been declared

Svojstvo globalnog objekta

U globalnom opsegu var varijabla postaje svojstvo globalnog objekta (osim ako koristimo module). Sa let to nije slucaj.

var poruka = true;
let email = "@email.com";

console.log(window.poruka); // true
console.log(window.email); // undefined

"var" ili "let"?

Kyle Simpson u "You Don't Know JS" preporucuje da se var koristi za one varijable koje trebaju imati funcijski opseg, a let kada ga treba ograniciti na trenutni blok {}. Drugi smatraju da je var greska dizajna koja prividno ciniti stvari "jednostavnijima", ali ih zapravo komplikuje. Ukoliko zelite varijablu u opsegu funkcije dovoljno je let deklarisati u funkciji i bice na raspolaganju ugnijezdenim blokovima.

function brojanje() {
  let i = 0;
  for(; i < 10; i++) {
    console.log(i); // 1 2 3 4 5 6 7 8 9
  }
  console.log(i);
  // 10
}

brojanje();

Ili ukoliko zelite dodijeliti vrijednost varijabli pod odredjenim uslovima:

let isEmpty;

if(true) {
  isEmpty = true;
}

check(isEmpty);

Sazetak