Tận hưởng sức mạnh của JavaScript Let - JavaScript Let Variable

Từ khóa let được giới thiệu trong ES6 (2015) Các biến được xác định bằng let không thể được khai báo lại Các biến được xác định bằng let phải được khai báo trước khi sử dụng Các biến được xác định bằng let có Phạm vi khối

Không thể khai báo lại

Các biến được xác định bằng let không thể được khai báo lại.

Bạn không thể vô tình khai báo lại một biến được khai báo bằng let.

Với let bạn không thể làm điều này:

let x = "John Doe";

let x = 0;

 

Nhưng với var bạn có thể:

var x = "John Doe";

var x = 0;

 

Phạm vi khối

Trước ES6 (2015), JavaScript có Phạm vi toàn cầu và Phạm vi hàm.

ES6 đã giới thiệu hai từ khóa JavaScript mới quan trọng: let và const.

Hai từ khóa này cung cấp Phạm vi khối trong JavaScript.

Các biến được khai báo bên trong khối {  } không thể được truy cập từ bên ngoài khối:

{

  let x = 2;

}

// x can NOT be used here

 

Các biến được khai báo bằng từ khóa var KHÔNG được có phạm vi khối.

Các biến được khai báo bên trong khối {  } có thể được truy cập từ bên ngoài khối.

{

  var x = 2;

}

// x CAN be used here

 

Khai báo lại biến

Việc khai báo lại một biến bằng từ khóa var có thể gây ra vấn đề.

Khai báo lại một biến bên trong một khối cũng sẽ khai báo lại biến bên ngoài khối đó:

var x = 10;

// Here x is 10

{

  var x = 2;

// Here x is 2

}

// Here x is 2

 

Khai báo lại một biến bằng từ khóa let có thể giải quyết được vấn đề này.

Khai báo lại một biến bên trong một khối sẽ không khai báo lại biến bên ngoài khối:

 

let x = 10;

// Here x is 10

{

  let x = 2;

// Here x is 2

}

// Here x is 10

 

Sự khác nhau giữa var, let và const

	Phạm vi	Khai báo lại	Gán lại	Hoisted	Binds this
var	Không	Có	Có	Có	Có
let	Có	Không	Có	Không	Không
const	Có	Không	Không	Không	Không

 

Ưu điểm

let và const có phạm vi khối.

let và const không thể được khai báo lại.

let và const phải được khai báo trước khi sử dụng.

let và const không liên kết với this.

let và const không được di chuyển lên đầu phạm vi trước khi chúng được thực thi.

Khuyết điểm

var không cần phải khai báo.

var được được di chuyển lên đầu phạm vi trước khi chúng được thực thi.

var liên kết với this.

Trình duyệt hỗ trợ

Từ khóa let và const không được hỗ trợ trong Internet Explorer 11 trở về trước.

Bảng sau xác định các phiên bản trình duyệt đầu tiên được hỗ trợ đầy đủ:

Chrome 49	Edge 12	Firefox 36	Safari 11	Opera 36
Mar, 2016	Jul, 2015	Jan, 2015	Sep, 2017	Mar, 2016

 

Khai báo lại

Việc khai báo lại một biến JavaScript bằng var được phép ở bất kỳ đâu trong chương trình:

var x = 2;

// Now x is 2

var x = 3;

// Now x is 2

 

Với let, KHÔNG được phép khai báo lại một biến trong cùng một khối:

var x = 2;   // Allowed

let x = 3;   // Not allowed

{

let x = 2;   // Allowed

let x = 3;   // Not allowed

}

{

let x = 2;   // Allowed

var x = 3;   // Not allowed

}

 

Khai báo lại một biến bằng let, trong một khối khác, được phép:

let x = 2;   // Allowed

{

let x = 3;   // Allowed

}

{

let x = 4;   // Allowed

}

 

Hoisting

Các biến được xác định bằng var được đưa lên trên cùng và có thể được khởi tạo bất kỳ lúc nào.

Nghĩa là bạn có thể sử dụng biến trước khi nó được khai báo:

carName = "Volvo";

var carName;

 

Nếu bạn muốn tìm hiểu thêm về hoisting, hãy nghiên cứu bài JavaScript Hoisting.

Các biến được xác định bằng let cũng được đưa lên đầu khối nhưng không được khởi tạo.

Vì thế sử dụng biến let trước khi nó được khai báo sẽ dẫn đến lỗi ReferenceError: