Học Javascript 7: [ES6] Phân biệt var, let và const

Block scope là gì?
Khai báo biến với var
ES6 let và const
Cẩn thận với Hoisting
Var đã chết? Giờ dùng cái nào?

Block scope là gì?

if (true) {
  var text = 'in if statement'
}

console.log(text)

if (true) {

var text = 'in if statement'

}

console.log(text)

Đây có thể gọi là cái ngáo đá nhất khi mới học Javascript, khi nhìn thấy code trong dấu { }, ta thường nghĩ là sẽ tạo ra scope mới. Nhưng trong Javascript, chỉ có function mới có thể tạo ra Execution Context mới.

If else, vòng lặp, vv đều không thể thay đổi scope của code được. Kiểu như Javascript nó xem { } như người vô hình vậy. Bạn có thể xài free-standing blocks như dưới đây được luôn:

{
  var text = 'in block scope'
  console.log(text)
}

{

var text = 'in block scope'

console.log(text)

}

Vẫn in ra ‘in block scope’ bình thường.

Khai báo biến với var

Khai báo chồng được luôn:

var text = 'niviki.com'

var text = 'niviki'

console.log(text)

var text = 'niviki.com'

var text = 'niviki'

console.log(text)

Mọi người hay nhầm chỗ này:

for ( var count = 0; count < 3; count++ ){
  
}

console.log(count)

for ( var count = 0; count < 3; count++ ){

}

console.log(count)

count = 3 sau khi ra khỏi for

ES6 let và const

Phiên bản ES6 của Javascipt giới thiệu 2 cách khai báo mới là let và const, chúng có những điểm khác biệt sau:

Không khai báo chồng lên như var được

Swift

let text = 'niviki.com' var text = 'niviki' // error let text = 'niviki' // error

1
2
3
4

let text = 'niviki.com'

var text = 'niviki' // error
let text = 'niviki' // error

let và const gắn với block scope

for ( let count = 0; count < 3; count++ ){
  
}

if (true ){
  const email = 'khoa@niviki.com'
}

console.log(count) // count is not defined
console.log(email) // email is not defined

for ( let count = 0; count < 3; count++ ){

}

if (true ){

const email = '[email protected]'

}

console.log(count) // count is not defined

console.log(email) // email is not defined

const không thay đổi được giá trị, let thì đổi thoải mái con gà mái:

let text = 'niviki.com'
const email = 'khoa@niviki.com'


text = 'niviki'
email = 'admin@niviki.com' // Uncaught TypeError: Assignment to constant variable.

let text = 'niviki.com'

const email = '[email protected]'

text = 'niviki'

email = '[email protected]' // Uncaught TypeError: Assignment to constant variable.

Cẩn thận với Hoisting

const và let không hoisting như var:

console.log(text)

let text = 'niviki.com'

console.log(text)

let text = 'niviki.com'

Kết quả sẽ là: text is not defined

Tại sao?

Nếu bạn theo dõi những bài trước thì có thể giải thích dễ dàng rồi. Vì có global execution context nên biến khai báo với var được tạo trong execution context đó. Còn với biến được khai báo với const và let thì không thể.

Var đã chết? Giờ dùng cái nào?

Nếu bạn search ‘should I use var let const in Javascript’ sẽ ra một đống bài, anh hùng khắp nơi cùng tranh luận. Mình thấy có một bài giải thích hay về vấn đề này: