JavaScript

Từ khóa let trong JavaScript

Từ khóa let trong JavaScript
Được viết bởi Minh Hoàng

Series lập trình JavaScript, ngôn ngữ lập trình linh động, thực thi phía client.

Từ khóa let trong JavaScript

– ECMAScript 2015 (ES2015) đã giới thiệu hai từ khóa mới quan trọng trong JavaScript là: letconst.

– Hai từ khóa này cung cấp thêm Block Scope (phạm vi Block) cho các biến và hằng số) trong JavaScript.

– Trước ECMAScript 2015 (ES2015), JavaScript chỉ có 2 phạm vi là: Global ScopeFunction Scope.

1. Let, var ảnh hưởng đến phạm vi của biến như thế nào?

1. Let, var ảnh hưởng đến phạm vi của biến như thế nào?

1.1. Global Scope

– Các biến được khai báo toàn cục (Globally, bên ngoài bất kỳ hàm nào) có Phạm vi toàn cục (Global Scope), gọi là biến toàn cục.

– Các biến được khai báo bằng varlet là giống nhau khi được khai báo bên ngoài một khối. Cả hai đều có phạm vi toàn cục.

– Và có thể được truy cập từ bất kỳ đâu trong chương trình JavaScript.

Ví dụ:
let carName1 = "Toyota";
// Hoặc:
var carName2 = "Ferrari";

// code ở đây sử dụng được biến carName1, carName2

function myFunction() {
    // code ở đây cũng sử dụng được carName1, carName2
}
Try it »

Biến Global trong HTML

– Trong JavaScript, phạm vi toàn cục (global scope) là JavaScript environment. Còn với HTML, global scope là window object.

– Các biến toàn cục được định nghĩa với từ khóa var thuộc về đối tượng window, còn định nghĩa bằng từ khóa let thì KHÔNG thuộc về đối tượng window:

Ví dụ:
var carName1 = "Toyota";
// code ở đây CÓ thể sử dụng biến [window.carName1]
// ...

let carName2 = "Ferrari";
// code ở đây KHÔNG thể sử dụng biến [window.carName2]
// ...
Try it »

1.2. Function Scope

– Các biến được khai báo cục bộ (Locally, bên trong một hàm) có Phạm vi hàm (Function Scope), gọi là biến cục bộ.

– Các biến được khai báo bằng varlet là giống nhau khi được khai báo bên trong một hàm. Cả hai đều có phạm vi hàm.

– Các biến cục bộ CHỈ có thể được truy cập từ bên trong hàm mà chúng được khai báo.

Ví dụ:
// code ở đây KHÔNG thể sử dụng carName1, carName2

function myFunction() {
    let carName1 = "Toyota";
    var carName2 = "Ferrari";
    // code ở đây CÓ thể sử dụng carName1, carName2
}

// code ở đây KHÔNG thể sử dụng carName1, carName2
Try it »

1.3. JavaScript Block Scope

– Biến được khai báo bằng var thì KHÔNG có phạm vi block (Block Scope). Do đó, các biến được khai báo bên trong một khối {}, CÓ thể được truy cập từ bên ngoài khối.

Ví dụ:
{ 
    var x = 99; 
}
// code ở đây CÓ thể sử dụng x

– Kể từ ECMAScript 2015 (ES2015) mới có sự ra đời của Block Scope cùng với từ khóa let, do đó biến được khai báo bằng let thì có phạm vi block (Block Scope). Và các biến được khai báo bên trong một khối {}, KHÔNG thể được truy cập từ bên ngoài khối.

Ví dụ:
{ 
    let x = 99; 
}
// code ở đây KHÔNG thể sử dụng x

1.4. Loop Scope

– Trong vòng lặp biến được khai báo bằng từ khóa var, sau khi xử lý, tính toán có giá trị bao nhiêu, thì khi ra ngoài vòng lặp biến sẽ có giá trị bấy nhiêu:

Ví dụ:
var ii = 5;
for (var ii = 0; ii < 10; ii++) {
    // xử lý abc
    // ...
    
    var x = 99;
    // xử lý xyz
    // ...
}

// Ở đây ii = 10, và x = 99
Try it »

– Trong vòng lặp biến được khai báo bằng từ khóa let, thì biến chỉ có giá trị (biến ii) và phạm vi sử dụng (biến x) trong vòng lặp, xử lý xong, khi ra ngoài vòng lặp thì:

  • biến ii sẽ có giá trị như trước khi vào vòng lặp, không bị thay đổi.
  • biến x sẽ bị mất, không còn tồn tại.
Ví dụ:
let ii = 5;
for (let ii = 0; ii < 10; ii++) {
    // xử lý abc
    // ...
    
    let x = 99;
    // xử lý xyz
    // ...
}

// Ở đây ii = 5, và x = undefined
Try it »
2. Khai báo lại biến bằng let, var khác nhau thế nào?

2. Khai báo lại biến bằng let, var khác nhau thế nào?

– Việc khai báo lại (redeclaring) một biến JavaScript bằng từ khóa var được cho phép ở bất kỳ đâu (anywhere) trong chương trình:

Ví dụ:
var x = 2;
// Ở đây x = 2

var x = 3;
// Ở đây x = 3

{ 
    var x = 4;
    // Ở đây x = 4
}

// Ở đây x = 4
Try it »

– Việc khai báo lại (redeclaring) một biến JavaScript bằng từ khóa let thì CÙNG phạm vi không được phép khai báo lại biến, còn KHÁC phạm vi thì OK:

Ví dụ:
let x = 2;
// Ở đây x = 2

//let x = 3;		// Error: Cùng phạm vi, không được phép khai báo lại biến

{ 
    let x = 4;
    
    //let x = 5;	// Error: Cùng phạm vi, không được phép khai báo lại biến
    
	// Ở đây x = 4
}

// Ở đây x = 2
Try it »

Ví dụ:
let x = 2;       // Khác phạm vi, khai báo lại biến OK
// Ở đây x = 2

{
    let x = 3;   // OK
    // Ở đây x = 3
}

{
    let x = 4;   // OK
    // Ở đây x = 4
}

// Ở đây x = 2
Try it »

Trường hợp khai báo lại CÙNG một biến bằng var và let

– Trong cùng phạm vi hoặc trong cùng một khối: việc khai báo lại (redeclaring) biến var đã tồn tại bằng từ khóa letkhông được phép:

Ví dụ:
var x = 2;
let x = 3;		// Error

{
    var x = 4;	// OK
    let x = 5;	// Error
}

– Và ngược lại, trong cùng phạm vi hoặc trong cùng một khối: việc khai báo lại (redeclaring) biến let đã tồn tại bằng từ khóa var cũng không được phép:

Ví dụ:
let x = 2;
var x = 3;		// Error

{
    let x = 4;	// OK
    var x = 5;	// Error
}
3. Let và Hoisting

3. Let và Hoisting

– Các biến được định nghĩa với var được hoisted lên trên cùng.

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

Ví dụ:
carName = "Toyota";
// CÓ THỂ sử dụng biến carName tại đây

// Khai báo biến var
var carName;
Try it »

– Các biến được định nghĩa với let KHÔNG được hoisted lên trên cùng.

– Sử dụng biến let trước khi nó được khai báo sẽ dẫn đến một ReferenceError. Khi đó, biến sẽ nằm trong “vùng chết tạm thời” (“temporal dead zone”) từ đầu khối cho đến khi nó được khai báo:

Ví dụ:
// KHÔNG thể sử dụng biến carName ở đây
// ...
let carName;

Tham khảo w3schools.

Cảm ơn bạn đã theo dõi. Đừng ngần ngại hãy cùng thảo luận với chúng tôi!


Giới thiệu

Minh Hoàng

Xin chào, tôi là Hoàng Ngọc Minh, hiện đang làm BrSE, tại công ty Toyota, Nhật Bản. Những gì tôi viết trên blog này là những trải nghiệm thực tế tôi đã đúc rút ra được trong cuộc sống, quá trình học tập và làm việc. Các bài viết được biên tập một cách chi tiết, linh hoạt để giúp người đọc có thể tiếp cận một cách dễ dàng nhất. Hi vọng nó sẽ có ích hoặc mang lại một góc nhìn khác cho bạn[...]

3
Bình luận của bạn

avatar
3 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
0 Comment authors
Recent comment authors
Mới nhất Cũ nhất Thích nhiều nhất
trackback

[…] bằng từ khóa let hoặc const thì sẽ không được Hoisted. – Chi tiết xem thêm: Từ khóa let | Từ khóa […]

trackback

[…] Có thể bạn quan tâm: – Phạm vi của biến JavaScript. – Từ khóa let trong JavaScript. […]

trackback

[…] trời” mà nó chưa được khai báo bằng 1 trong các từ khóa như var, let, hay const rồi gán giá trị cho nó, thì biến đó sẽ được JavaScript hiểu là 1 […]

Từ khóa let trong JavaScript

by Minh Hoàng Time to read: 7 min
3