Khai báo biến bằng từ khoá let

Giới thiệu nội dung bài viết

Chào các bạn, hôm nay anh sẽ hướng dẫn mọi người về sử dụng từ khoá let để khai báo biến là như thế nào? Trong ES5 chúng ta sử dụng từ khoá var để khai báo một biến. Khi sử dụng từ khoá var thì phạm vi hoạt động của biến đó là toàn cục, ở đâu cũng có thể thấy được. Ở phiên bản mới ES6 chúng ta có một cách mới để khai báo biến đó là từ khoá let. Từ khoá let cũng tương tự như từ khoá var nhưng có điều giá trị của nó chỉ tồn tại trong khối lệnh, khi thoát ra ngoài khối lệnh ( trong javascript khối lệnh được ký hiệu là trong dấu ngoặc nhọn { … } ) thì giá trị đó vẫn giữ nguyên.

Anh lấy ví dụ như sau

1
2
3
4
5
6
let x = 10;
if (x == 10) {
    let x = 20;
    console.log(x); // 20:  reference x inside the block
}
console.log(x); // 10: reference at the begining of the script

• Đầu tiên ta khai báo biến x có giá trị là 10.
• Tiếp theo trong khối lệnh if ta gán x bằng 20, sau đó ta in giá trị ra thì lúc này x = 20. Bởi vì từ khoá let và câu lệnh console.log được khai báo trong khối lệnh if nên giá trị của x = 20.
• Khi thoát ra khỏi khối lệnh if, nếu ta console.log(x) thì lúc này ta chỉ nhận giá trị là 10. Như vậy giá trị let x = 20 chỉ có tác dụng trong khối lệnh if mà thôi. Khi khối lệnh if thực thi xong thì giá trị cũng mất đi. Hay còn gọi cách khác là giá trị local (giá trị chỉ tồn tại trong khối lệnh).

1. Javascript let và global(toàn cục)

Khi chúng ta sử dụng từ khoá var để khai báo biến thì phạm vi của nó sẽ là global (toàn cục). Ví dụ như ta khai báo biến a = 10;

1
2
var a = 10;
console.log(window.a); // 10

Khi đó khi ta sử dụng biến window.a ta vẫn thấy và lấy được giá trị a vì biến a là biến toàn cục ở đâu cũng lấy được.

Tuy nhiên nếu như ta sử dụng biến let để khai báo trong trường hợp sau

1
2
let b = 20;
console.log(window.b); // undefined

Lúc này biến b không được thêm vào đối tượng global như một thuộc tính nên sẽ không thấy được giá trị của b. Chính vì vậy khi ta gọi window.b sẽ nhận được thông báo biến b chưa khai báo.

2. Callback function trong vòng lặp

Anh ví dụ như anh có đoạn mã sau đây

1
2
3
4
5
for (var i = 0; i < 5; i++) {
    setTimeout(function () {
        console.log(i);
    }, 1000);
}

Anh mong muốn là vòng lặp sẽ chạy từ 0 đến 4 và in cho anh các số là 0,1,2,3,4 mỗi giây. Nhưng thực tế khi chạy đoạn mã trên anh sẽ nhận được in ra số 5 trong 5 lần chạy. Vì sao lại như vậy.

Sau khi chạy 5 vòng lặp thì giá trị của i lúc này là bằng 5. Sau đó nó truyền số 5 này vào callback là setTimeout trong 1 giây. Chính vì nó dùng chung 1 biến i nên giá trị của 5 lần đó đều giống nhau cả.

Để giải quyết được vấn đề này thì chúng ta sử dụng let như sau

1
2
3
4
5
for (let i = 0; i < 5; i++) {
    setTimeout(function () {
        console.log(i);
    }, 1000);
}

3. Khai báo lại giá trị

Sử dụng từ khoá var cho phép chúng ta khai báo lại giá trị của biến mà không bị báo lỗi

1
2
3
var counter = 0;
var counter;
console.log(counter); // 0

Ở ví dụ trên anh khai báo biến counter = 0, sau đó khai báo lại thì khi chạy chương trình vẫn okie không báo lỗi

Tuy nhiên nếu chúng ta sử dụng let thì sẽ bị báo lỗi như sau

1
2
3
let counter = 0;
let counter;
console.log(counter);

Chúng ta sẽ nhận được lỗi là

1
Uncaught SyntaxError: Identifier 'counter' has already been declared

4. Hoisting

Anh có ví dụ sau đây

1
2
3
4
{
    console.log(counter); // 
    let counter = 10;    
}

Như các em thấy anh sử dụng biến counter trong hàm console.log trước khi anh khai báo biến counter = 10. Hoisting có nghĩa là mình sử dụng biến trước khi khai báo nó.

Thực tế khi Javascript chạy và biên dịch nó sẽ di chuyển dòng khai báo counter = 10 lên trước khối lệnh console.log

Khi chạy dòng khối lệnh ở trên ta sẽ nhận được lỗi như sau

1
2
Uncaught ReferenceError: Cannot access 'counter' before initialization
Code language: JavaScript (javascript)

Chúng ta nhận được lỗi như vậy vì khi chương trình chạy nó sẽ di chuyển dòng lệnh khai let counter lên phía trên khối lệnh. Tuy nhiên nó không gán giá trị 10 vào biến counter, chính vì vậy mà mình sẽ gặp lỗi ReferenceError.

Trên thực tế các anh cũng không bao giờ sử dụng biến trước khi khai báo, mà chúng ta phải tập thói quen khai báo biến rồi mới sử dụng nó. Trong thực tế anh đã gặp rất nhiều trường hợp các bạn dev khai báo biến vô tội vạ , thích thì khai báo biến ở trên, thích thì khai báo ở giữa hoặc cuối file JS nên làm cho việc debug chương trình rất khó khăn.

5. Demo Video

Play

Mọi người hãy Subscribe kênh youtube dưới đây nhé để cập nhật các video mới nhất về kỹ thuật và kỹ năng mềm

Các khoá học lập trình MIỄN PHÍ tại đây

Comments