Bài 3: Scoping trong ES6

Phần này chúng ta sẽ tìm hiểu về scoping – phạm vi thực thi của một biến hoặc hàm trong mới được thêm vào trong ES6.

Ở bài này có sử dụng một thuật ngữ là block-scoped thì mọi người ở thể hiểu block-scope này tương đương với một cặp dấu {}, cứ mỗi một cặp dấu đó là một block-scope.

1, Block-scoped Variables.

Như chúng ta đã được học thì để khai báo một biến trong javascript chúng ta sử dụng từ khóa var (hoặc không cần – nhưng không đúng chuẩn), nhưng hôm nay chúng ta sẽ được tìm hiểu thêm một cách khai báo biến nữa trong javascript mới được thêm vào từ ES6 là sử dụng từ khóa let.

Khi một biến được khai báo bằng từ khóa let thì nó chỉ có phạm vị hoạt động trong block-scope mà nó được khai báo hoặc là các block-scope được nó block-scope khai báo nó bao ngoài, còn các block scope bao ngoài scope chứa nó sẽ không sử dụng được.

VD: Khai báo biến với từ khóa var.

if (true) {
    var slogan = "Học Lập trình online Toidicode.com";
}
alert(slogan);

Như bạn đã thấy thì chương trình đã chạy bình thường. Bây giờ chúng ta sẽ thử đổi var thành let xem sao nhé!

if (true) {
    let slogan = "Học Lập trình online Toidicode.com";
}
alert(slogan);

Đoạn code đã lỗi và trả về log

Uncaught ReferenceError: slogan is not defined

Đoạn log này cho chúng ta biết là biến slogan chưa được định nghĩa. Như vậy, các bạn đã thấy do chúng ta khai báo biến slogan ở scope bên trong lên khi chúng ta gọi nó từ scope bao ngoài nó thì là điều hoàn toàn không thể.

2, Block-Scoped Functions.

Cũng tương tự như thế, đối với function chúng ta cũng có scoping như vậy.

Khi một function được khai báo ở một block-scope thì nó chỉ có tác dụng ở các block-scope được nó bao bọc và các block-scope bao ngoài nó sẽ không sử dụng được.

VD:

{
    function foo() {
        return 1;
    }
    {
        function foo() {
            return 2;
        }
        console.log('scope 2: ' + foo());
        //2
    }
    console.log('scope 1: ' + foo());
    //1
}

3, Lời kết.

Như vậy ở phần này các mình đã giới thiệu xong đến mọi người về scoping trong ES6 rồi. Trên thực tế thì scoping này sẽ rất có lợi cho các bài toán tối ưu tài nguyên.