Lexical Scope và Block Scope trong javascript

Scope

Trong javascript có 2 loại scopes: lexical scope và block scope

Lexical scope là không gian biến được khai báo ở trong hàm(function). Từ khoá “var” được dùng để khai báo biến trong lexical scope của hàm. Ví dụ:

Biến bar được khai báo trong lexical scope của hàm foo.

Block scope là không gian biến được khai báo giữa 1 cặp dấu ngoặc nhọn “{…}”. Từ khoá “let" và “const" được dùng để khai báo biến ở trong block scope. Ví dụ:

Trong ví dụ trên, biến “variable” được khai báo trong block scope giữa hai dấu ngoặc nhọn “{…}” của if.

Một số ví dụ để các bạn hiểu rõ hơn về 2 loại scope “block scope" và “lexical scope”:

Ví dụ 1:

Trong ví dụ trên biến ”bar” thứ 2 do có từ khoá khai báo “var” ở phía trước nên sẽ có nhiều bạn hiểu lầm là biến “bar” này là một biến được khai báo mới.

Tuy nhiên, do “var” chỉ khai báo biến trong lexical scope (ở đây là function foo) như mình đã nói ở trên nên 2 biến bar này thực chất là một biến và biến “bar” thứ 2 sẽ được khai báo đè lên biến bar thứ nhất.

Do đó, kết quả trả về sẽ là giá trị của biến “bar“ thứ 2: 1

Ví dụ 2:

Ví dụ trên tương tự như ví dụ 1 nhưng sử dụng từ khoá “let” để khai báo thay vì từ khoá “var”.

Ở đây, biến bar thứ 2 được khai báo locally trong block scope giữa 2 dấu ngoặc nhọn của if do tác dụng của từ khoá “let“ (let và const khai báo biến trong block scope). Do đó, giá trị của biến “bar” đầu tiên sẽ không bị ảnh hưởng và hàm này sẽ trả về giá trị của biến bar đầu tiên là 2.

Cám ơn bạn đã đọc bài viết. Hãy like nếu bài viết bổ ích với bạn. Nếu mình có nhầm lẫn hoặc bạn có ý kiến đóng góp, xin vui lòng comment ở bên dưới.

Một số nguồn tham khảo: