Wraz z rozwojem JS doszły nam nowsze zapisy takie jak let (zmienna) i const (stała), które naprawiają część problemów, które miał var.

1. Omówienie var

a) ZASIĘG FUNKCYJNY (konstrukcja var działa w kontekście funkcji).

for (var i = 1; i <= 3; i++){ 
console.log(i) 
} 

console.log('i = ', i)
// 1
// 2
// 3
// i =  4

b) można ponownie deklarować tą samą zmienną:

var x = 3;
x           // 3
var x = 4; 
x           //4

c) występuje hoisting:

console.log(text2); // tekst"
var text2 = "tekst";

2. Omówienie let i const

a) ZASIĘG BLOKOWY (konstrukcja let w kontekście bloku kodu).

for (let i = 1; i <= 3; i++){ 
console.log(i) 
} 

console.log('i = ', i)
// 1
// 2
// 3
// Uncaught ReferenceError: i is not defined
    at <anonymous>:4:21

b) Nie można deklarować ponownie tej samej zmiennej. Przy deklaracji tej samej zmiennej jest error (chroni przed nadpisaniem):

let x = 3;
x           // 3
let x = 4; // error


const x = 3;
x  // 3
const x = 4; //error

c) brak występowania hoistingu:

console.log(text2);         // błąd
let text2 = "przykładowy tekst";

3. Omówienie różnic między let i const

let

a) Możemy zadeklarować let bez przypisania jej wartości na samym początku.

let x

b) Let tworzy zmienne, którym potem możemy zmieniać wartość.

let b = 5
b   // 5
b = 7
b   // 7

let prop = {
    max : 10
}

prop.max = 15
prop // {max: 15}
prop = {} // {}

c) Słówka let używamy najczęściej do deklarowania zmiennych używanych w trakcie iteracji za pomocą pętli for/while.

const

a) Nie możemy zadeklarować const bez przypisania jej wartości na samym początku.

const x     //error

WARTOŚĆ PRZYPISUJEMY TYLKO W MOMENCIE DEKLARACJI !!

b) Po deklaracji za pomocą const nie możemy zmieniać zawartości, ale możemy zmieniać zawartość np. obiektu, tablicy, albo kluczy.

const a = 5
a       // 5
a = 7   // error 

const prop = {
max: 10
}

prop.max = 15; // 15
prop;       // {max: 15}
prop = {};  // error
prop.min = 5;  // 5
prop        // {max: 10, min: 10}

c) Słówka const używamy najczęściej do deklarowania obiektów i tablic.

Co więcej…nawiązują do zdania, które zostało napisane na wstępie chciałabym podkreślić, iż mówiąc o nowościach ES6 i deklaracji zmiennych należy uważać na słowa, które się wypowie :) Otóż nie let i const! Owszem let jest zmienną, ale const jak sama nazwa wskazuje jest stałą. Posiłkując się określeniami jednego z autorytetów JS Dr. Rauschmayer’a const tworzy immutable variables, czyli zmienną, której się nie zmienia.