Tìm hiểu "phạm vi biến" trong JavaScript

Trong JavaScript, phạm vi biến (variable scope) là khái niệm xác định phạm vi mà một biến có thể được truy cập hoặc sử dụng. Phạm vi biến ảnh hưởng đến cách mà các biến được phân loại và sử dụng trong các phần khác nhau của mã. Hiểu rõ về phạm vi biến giúp bạn quản lý biến tốt hơn và tránh các lỗi phổ biến liên quan đến biến.

1. Phạm Vi Toàn Cục (Global Scope)#

Biến được khai báo ngoài bất kỳ hàm nào hoặc khai báo bằng từ khóa var trong toàn bộ mã có phạm vi toàn cục. Các biến toàn cục có thể được truy cập từ bất kỳ đâu trong mã.

• Ví Dụ: ` let globalVariable = "I'm global";

  function showGlobal() { console.log(globalVariable); // "I'm global" }

  showGlobal(); console.log(globalVariable); // "I'm global" `

2. Phạm Vi Cục Bộ (Local Scope)#

Biến khai báo bên trong một hàm hoặc khối mã có phạm vi cục bộ. Biến cục bộ chỉ có thể được truy cập từ bên trong hàm hoặc khối mã mà nó được khai báo.

• Ví Dụ: ` function myFunction() { let localVariable = "I'm local"; console.log(localVariable); // "I'm local" }

  myFunction(); console.log(localVariable); // Lỗi: localVariable không được định nghĩa `

3. Phạm Vi Khối (Block Scope)#

Biến khai báo bằng từ khóa let hoặc const có phạm vi khối, nghĩa là chúng chỉ tồn tại trong khối mã {} mà chúng được khai báo.

• Ví Dụ: ` if (true) { let blockScopedVariable = "I'm block scoped"; console.log(blockScopedVariable); // "I'm block scoped" }

  console.log(blockScopedVariable); // Lỗi: blockScopedVariable không được định nghĩa `

4. Phạm Vi Hàm (Function Scope)#

Biến khai báo bằng từ khóa var có phạm vi hàm, nghĩa là biến đó chỉ có thể được truy cập từ bên trong hàm mà nó được khai báo.

• Ví Dụ: ` function myFunction() { var functionScopedVariable = "I'm function scoped"; console.log(functionScopedVariable); // "I'm function scoped" }

  myFunction(); console.log(functionScopedVariable); // Lỗi: functionScopedVariable không được định nghĩa `

5. Phạm Vi Biến Trong Các Phương Thức#

Biến có thể được khai báo trong các phương thức và có phạm vi chỉ trong phương thức đó. Biến toàn cục có thể được truy cập từ bên trong các phương thức, nhưng biến cục bộ của phương thức chỉ có thể được truy cập từ trong phương thức đó.

• Ví Dụ: ` let globalVariable = "I'm global";

  function outerFunction() { let outerVariable = "I'm outer";

  function innerFunction() { let innerVariable = "I'm inner"; console.log(globalVariable); // "I'm global" console.log(outerVariable); // "I'm outer" console.log(innerVariable); // "I'm inner" }

  innerFunction(); console.log(innerVariable); // Lỗi: innerVariable không được định nghĩa }

  outerFunction(); `

6. Hoisting#

Hoisting là cơ chế trong JavaScript mà biến và khai báo hàm được nâng lên đầu phạm vi chứa chúng. Biến khai báo bằng từ khóa var sẽ được hoisted, nhưng giá trị của biến sẽ không. Biến khai báo bằng let và const không được hoisted theo cùng cách.

• Ví Dụ: ` console.log(hoistedVar); // undefined var hoistedVar = "I am hoisted";

  console.log(hoistedVar); // "I am hoisted" `

console.log(notHoistedLet); // Lỗi: Cannot access 'notHoistedLet' before initialization let notHoistedLet = "I am not hoisted";

7. Scope Chain#

Khi một biến được truy cập, JavaScript sẽ tìm kiếm biến trong phạm vi cục bộ trước. Nếu không tìm thấy, nó sẽ tìm trong phạm vi hàm chứa và tiếp tục tìm trong các phạm vi chứa cấp cao hơn cho đến khi đạt được phạm vi toàn cục.

• Ví Dụ: ` let globalVariable = "I'm global";

  function outerFunction() { let outerVariable = "I'm outer";

  function innerFunction() { console.log(outerVariable); // "I'm outer" console.log(globalVariable); // "I'm global" }

  innerFunction(); }

  outerFunction(); `

8. Tóm Tắt#

• Phạm Vi Toàn Cục: Biến có thể được truy cập từ bất kỳ đâu.

• Phạm Vi Cục Bộ: Biến chỉ có thể được truy cập trong hàm hoặc khối mã mà nó được khai báo.

• Phạm Vi Khối: Biến khai báo bằng let và const chỉ tồn tại trong khối mã {}.

• Phạm Vi Hàm: Biến khai báo bằng var chỉ tồn tại trong hàm mà nó được khai báo.

• Hoisting: Biến khai báo bằng var được nâng lên đầu phạm vi.

• Scope Chain: Trình duyệt tìm kiếm biến từ phạm vi cục bộ lên đến phạm vi toàn cục.

Hiểu rõ về phạm vi biến giúp bạn viết mã chính xác hơn và tránh các vấn đề liên quan đến biến không được định nghĩa hoặc truy cập sai.