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à: let và const.
– 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 Scope và Function Scope.
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 var và let 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ụ:
[code language=”javascript”]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
}[/code]
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ụ:
[code language=”javascript”]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]
// …[/code]
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 var và let 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 language=”javascript”]// code ở đây KHÔNG thể sử dụng carName1, carName2function 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[/code] 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ụ:
[code language=”javascript”]{var x = 99;
}
// code ở đây CÓ thể sử dụng x[/code]
– 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ụ:
[code language=”javascript”]{let x = 99;
}
// code ở đây KHÔNG thể sử dụng x[/code]
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ụ:
[code language=”javascript”]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[/code] 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ụ:
[code language=”javascript”]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[/code] Try it »
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ụ:
[code language=”javascript”]var x = 2;// Ở đây x = 2
var x = 3;
// Ở đây x = 3
{
var x = 4;
// Ở đây x = 4
}
// Ở đây x = 4[/code] 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ụ:
[code language=”javascript”]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[/code] Try it »
Ví dụ:
[code language=”javascript”]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[/code] 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 let là không được phép:
Ví dụ:
[code language=”javascript”]var x = 2;let x = 3; // Error
{
var x = 4; // OK
let x = 5; // Error
}[/code]
– 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ụ:
[code language=”javascript”]let x = 2;var x = 3; // Error
{
let x = 4; // OK
var x = 5; // Error
}[/code]
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ụ:
[code language=”javascript”]carName = "Toyota";// CÓ THỂ sử dụng biến carName tại đây
// Khai báo biến var
var carName;[/code]
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ụ:
[code language=”javascript”]// KHÔNG thể sử dụng biến carName ở đây// …
let carName;[/code]
Xem thêm: Khái niệm Hoisting trong JavaScript.
[…] 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 […]
[…] Có thể bạn quan tâm: – Phạm vi của biến JavaScript. – Từ khóa let trong JavaScript. […]
[…] 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 […]