Scope trong Javascript là gì

# Scope là gì?
Scope nói tới khả năng được sử dụng của một biến, giá trị, method trong Javascript. Trong Javascript từ phiên ES5 trở xuống mình có 2 loại scope là Global Scope và Local Scope. Từ ES6 trở lên, có thêm Block Scope, nó gắn liền với kiểu dữ liệu let, const.

# Ví dụ Global Scope &Local Scope

var x = 5; // declare x globally function method2[] { console.log[x]; // logs 5 } function method2[] { var x = 4; // create x locally in the function console.log[x]; // logs 4 } method1[]; // Local scope will be used method2[]; // Global scope will be used console.log[x]; // logs 5

Trong đoạn script, khai báo x đầu tiên thuộc về Global Scope của script, nó có thể được sử dụng ở bất kỳ đâu trong đoạn script trên, nếu trong scope nhỏ đó, không khai báo lại x.
Cụ thể trong method1, x không được khai báo lại, nên x ở Global Scope sẽ được dùng tới. Tuy nhiên, trong method2, x được khai báo lại, nên khi method này được gọi x sẽ được tạo ra trong local scope [function scope], sau khi method2 được thực thi, x sẽ được xoá đi.

# Block Scope [Chỉ áp dụng với let, const. Không hoạt động với var]

## Ví dụ 1: Var không có block scope [if, for, while]

function doSomethingCool[] { var x = 5; // variable scoped to doSomethingCool[] function if [true] { var x = 10; // same variable! will override the x=5 console.log[x]; // logs 10 } console.log[x]; // logs 10 } Trong ví dụ trên, trong block if, chúng ta khai báo lại x = 10. Kết quả không giống với ví dụ trước, lần này x = 10, sẽ đè lên khai báo của x = 5 trong scope cao hơn. Tức là vì block scope không hỗ trợ đối với var, nên khi thực thi block này, Javascript không tạo ra x trong scope này.

## Ví dụ 2: Let, const sẽ hoạt động trong cả block scope

function doSomethingCool[] { let x = 5; // variable scoped to doSomethingCool[] function if [true] { let x = 10; // new variable! does not conflict with x=5 console.log[x]; // logs 10 } console.log[x]; // logs 5, global scope }

Trong ví dụ trên, lần console.log cuối cùng, x vẫn không thay đổi, dù trong if block ở bên trên có khai báo lại.

Nguồn tham khảo:
//scotch.io/courses/10-need-to-know-javascript-concepts/scope