Xem thêm:

• Var, let và const trong Javascript
• Hoisting trong Javascript

Scope (phạm vi) của biến trong Javascript như thế nào?

Biến trong javascript luôn có phạm vi của nó, trong bài này mình sẽ giúp các bạn hiểu rõ về phạm vi (scope) của biến nhé.

Về cơ bản, Javascript có 3 loại scope như sau:

• Block scope
• Function scope
• Global scope

Chúng ta sẽ đi chi tiết về từng loại scope trên.

Block scope

Trước khi ES6 ra đời, thì biến được định nghĩa với từ khóa var chỉ có 2 scopes là: Global scope và Function scope.

• ES6 đã giới thiệu 2 từ khóa mới là let và const, là Block scope.

• Biến được khởi tạo với let và const trong cặp dấu {} sẽ không thể truy cập từ bên ngoài block này.

Ví dụ:

{
  let hello = "Xin chào";
}
// Biến hello sẽ KHÔNG thể được sử dụng ở đây

• Biến được khởi tạo với var thì không có Block scope

Ví dụ:

{
  var hello = "Xin chào";
}
// Biến hello sẽ CÓ thể được sử dụng ở đây

Function scope

• Biến được khởi tạo ở trong function thì được gọi là Function scope, và KHÔNG thể sử dụng ở ngoài function.
• Cả 3 var, let, const đều giống nhau về Function scope.
• Các function khác nhau CÓ THỂ sử dụng chung tên biến.

Ví dụ:

function sayHello() {
  var helloVar = "Xin chào Var";
  let helloLet = "Xin chào Let";
  const helloConst = "Xin chào Const";
}

Global scope

• Biến được khởi tạo bên ngoài function thì được gọi là Global scope.
• Cả 3 var, let, const đều có thể là GLOBAL scope.
• Biến Global thì có thể sử dụng được trong tất cả function/block.

Ví dụ:

var helloVar = "Xin chào Var";
let helloLet = "Xin chào Let";
const helloConst = "Xin chào Const";

function sayHello() {
  console.log(helloVar);
  console.log(helloLet);
  console.log(helloConst);
}

Lưu ý

• Gán giá trị cho biến mà biến đó không được khởi tạo, thì biến sẽ tự động trở thành GLOBAL scope. Ví dụ:

function sayHello() {
  hello = "Xin chào";
}

• Biến được khởi tạo ở Global scope với var thì sẽ trở thành thuộc tính của window. Ví dụ:

var hello = "Xin chào";
console.log(window.hello); // Xin chào

Quan trọng

Các bạn hãy nhớ các điều sau để không gặp phải tình trạng rối tung khi code và debug nhé, để tránh việc làm các bạn stress :)

• Đừng tạo biến GLOBAL bất chấp, bạn phải biết bạn đang tạo với mục đích gì.
• Luôn ý thức được phạm vi của biến bạn đang khởi tạo sẽ ảnh hưởng như thế nào đến code của bạn.
• code trong function/block của bạn có thể thay đổi giá trị của biến GLOBAL mà bạn không hề biết, hãy chắc chắn những gì bạn đang làm không ảnh hưởng đến toàn bộ website.

Nếu có thắc mắc gì thì các bạn hãy comment bên dưới để mình trả lời nhé.