Let trong JavaScript

ECMAScript 2015

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

Cả hai từ khóa này trong JavaScript cung cấp phạm vi khối (Block Scope）biến (và hằng số).

Trước ES2015, JavaScript chỉ có hai loại phạm vi:Toàn cụcvàQuy mô hàm。

Toàn cục

Toàn cụcBiến được khai báo (ngoài hàm) cóToàn cục。

ví dụ

var carName = "porsche";
// Mã ở đây có thể sử dụng carName
function myFunction() {
  // Mã ở đây cũng có thể sử dụng carName
}

thử trực tiếp

Toàn cụcBiến có thể được truy cập ở bất kỳ vị trí nào trong chương trình JavaScript.

Quy mô hàm

Cục bộBiến được khai báo trong hàm cóQuy mô hàm。

ví dụ

// Mã ở đây không thể sử dụng carName
function myFunction() {
  var carName = "porsche";
  // code here CAN use carName
}
// Mã ở đây không thể sử dụng carName

thử trực tiếp

Cục bộBiến chỉ có thể được truy cập trong hàm được khai báo của chúng.

Phạm vi khối JavaScript

bằng cách var Biến được khai báo bởi từ khóa không có phạm vi khốiPhạm vi。

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

ví dụ

{ 
  var x = 10; 
}
// Ở đây có thể sử dụng x

Trước ES2015, JavaScript không có phạm vi khối.

Có thể sử dụng let Từ khóa khai báo biến có phạm vi khối.

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

ví dụ

{ 
  let x = 10;
}
// Ở đây không thể sử dụng x

Lại khai báo biến

Sử dụng var Từ khóa lại khai báo biến sẽ gặp vấn đề.

Việc lại khai báo biến trong khối cũng sẽ lại khai báo biến bên ngoài khối:

ví dụ

var x = 10;
// Đây là x bằng 10
{ 
  var x = 6;
  // Đây là x bằng 6
}
// Đây là x bằng 6

thử trực tiếp

Sử dụng let Từ khóa lại khai báo biến có thể giải quyết vấn đề này.

Việc lại khai báo biến trong khối sẽ không lại khai báo biến bên ngoài khối:

ví dụ

var x = 10;
// Đây là x bằng 10
{ 
  let x = 6;
  // Đây là x bằng 6
}
// Đây là x bằng 10

thử trực tiếp

Hỗ trợ trình duyệt

Internet Explorer 11 hoặc các phiên bản trước không hỗ trợ hoàn toàn let từ khóa。

Bảng dưới đây định nghĩa về từ khóa hỗ trợ hoàn toàn đầu tiên let Phiên bản trình duyệt của từ khóa:

Chrome 49 IE / Edge 12 Firefox 44 Safari 11 Opera 36
Tháng 3 năm 2016 Tháng 7 năm 2015 Tháng 1 năm 2015 Tháng 9 năm 2017 Tháng 3 năm 2016

Quy mô vòng lặp

Sử dụng trong vòng lặp var:

ví dụ

var i = 7;
for (var i = 0; i < 10; i++) {
  // Một số câu lệnh
}
// Đây là i là 10

thử trực tiếp

Sử dụng trong vòng lặp let:

ví dụ

let i = 7;
for (let i = 0; i < 10; i++) {
  // Một số câu lệnh
}
// Đây là i là 7

thử trực tiếp

Trong ví dụ thứ nhất, biến sử dụng trong vòng lặp bằng var Tái khai báo biến bên ngoài vòng lặp.

Trong ví dụ thứ hai, biến sử dụng trong vòng lặp bằng let Chưa tái khai báo biến bên ngoài vòng lặp.

Nếu sử dụng trong vòng lặp bằng let Đã khai báo biến i, thì chỉ trong vòng lặp, biến i mới là có thể nhìn thấy.

Quy mô hàm

Khi khai báo biến trong hàm, sử dụng var và let cũng rất tương tự.

Họ đều cóQuy mô hàm:

function myFunction() {
  var carName = "porsche";   // Quy mô hàm
}
function myFunction() {
  let carName = "porsche";   // Quy mô hàm
}

Toàn cục

Nếu khai báo bên ngoài khối, thì var và let cũng rất tương tự.

Họ đều cóToàn cục:

var x = 10;       // Toàn cục
let y = 6;       // Toàn cục

Biến toàn cục trong HTML

Trong trường hợp sử dụng JavaScript, toàn cục là môi trường JavaScript.

Trong HTML, toàn cục là đối tượng window.

bằng cách var Biến toàn cục được định nghĩa bằng từ khóa thuộc đối tượng window:

ví dụ

var carName = "porsche";
// Mã này có thể sử dụng window.carName

thử trực tiếp

bằng cách let Biến toàn cục được định nghĩa bằng từ khóa không thuộc đối tượng window:

ví dụ

let carName = "porsche";
// Mã này không được phép sử dụng window.carName

thử trực tiếp

Tái khai báo

Được phép sử dụng ở bất kỳ vị trí nào trong chương trình var Tái khai báo biến JavaScript:

ví dụ

var x = 10;
// Hiện tại, x là 10
var x = 6;
// Hiện tại, x là 6

thử trực tiếp

Trong cùng một khu vực hoặc cùng một khối, thông qua let Khai báo lại một var Biến không được phép:

ví dụ

var x = 10;       // Được phép
let x = 6;       // Không được phép
{
  var x = 10;   // Được phép
  let x = 6;   // Không được phép
}

Trong cùng một khu vực hoặc cùng một khối, thông qua let Khai báo lại một let Biến không được phép:

ví dụ

let x = 10;       // Cho phép
let x = 6;       // Không được phép
{
  let x = 10;   // Cho phép
  let x = 6;   // Không được phép
}

Trong cùng một khu vực hoặc cùng một khối, thông qua var Khai báo lại một let Biến không được phép:

ví dụ

let x = 10;       // Cho phép
var x = 6;       // Không được phép
{
  let x = 10;   // Cho phép
  var x = 6;   // Không được phép
}

Trong các khu vực hoặc khối khác nhau, thông qua let Khai báo lại biến là được phép:

ví dụ

let x = 6;       // Cho phép
{
  let x = 7;   // Cho phép
}
{
  let x = 8;   // Cho phép
}

thử trực tiếp

nâng cao

bằng cách var Biến được khai báo sẽnâng caonâng cao lên đỉnh. Nếu bạn không hiểu gì là nâng cao (Hoisting), hãy học chương nâng cao của chúng tôi.

Bạn có thể sử dụng biến trước khi khai báo nó:

ví dụ

// Tại đây, bạn có thể sử dụng carName
var carName;

thử trực tiếp

bằng cách let Biến được định nghĩa sẽ không được nâng cao lên đỉnh.

trong việc khai báo let Sử dụng biến trước khi khai báo sẽ gây ra ReferenceError。

Biến từ đầu của khối vẫn ở trong 'khu vực tạm thời chết' cho đến khi được khai báo:

ví dụ

// Tại đây, bạn không thể sử dụng carName
let carName;