Scope trong JavaScript là gì? Nắm chắc những thứ cơ bản để học Javascript tốt hơn

Scope trong JavaScript là gì?

Bạn đã bao giờ nghe về khái niệm Scope trong JavaScript chưa? Với mình thì khi lần đầu nghe về Scope, lên google dịch để xem nghĩa thì nó dịch ra là Phạm vi 👍.

Sau một hồi tìm hiểu thì mình thấy nó khá giống với ngoài đời. Giả sử Hà học chuyên ngành mỹ thuật, Trang học công nghệ thông tin. Trang không thể qua lớp của Hà để đăng ký môn học với mã số sinh viên của Trang được, Hà cũng thế. Còn các thành viên học cùng lớp thì có thể đăng ký môn học 😁.

Ví dụ ở trên giống gì với scope, chúng ta cùng theo dõi tiếp nhé.

Khi chúng ta khởi tạo một biến, và muốn nó chỉ nằm trong một phạm vi nhất định. Ví dụ ta tạo một biến result, tính toán để return về kết quả trong hàm calculate(), biến result lúc này thuộc về calculate(). Ta sẽ không thể sử dụng biến result ngoài calculate().

Khả năng truy cập của các biến được quản lý bởi scope. Chúng ta có thể thoải mái sử dụng các biến nếu ta sử dụng trong scope của nó. Nếu sử dụng ngoài scope, ta sẽ không thể sử dụng biến đó được.

Trong JavaScript, scope được tạo bởi một function hoặc code block.

Mình nói khá nhiều rồi ^^, chúng ta cùng xem một ví dụ để hiểu hơn nhé:

function number() {
  // The function scope
  let num = 2;
  console.log(num); // 2
}
number();
console.log(num); // Uncaught ReferenceError: num is not defined

Ở ví dụ trên ta thấy, biến num thuộc scope của number(). Chính vì vậy ta có thể sử dụng biến này trong scope thoải mái. Ta không thể truy xuất biến num ngoài scope number(), nếu các bạn thử truy xuất sẽ nhận được một lỗi num is not defined.

Nếu các bạn khởi tạo một biến bên trong một function hoặc code block, thì ta chỉ có thể sử dụng biến này trong function hoặc code block đó mà thôi.

Một ví dụ liên quan đến chuyện đăng ký môn học của Trang - Sinh Viên CNTT 😁. Chúng ta không thể sử dụng mssv trong scope sinhVienCNTT để đăng ký môn học mỹ thuật được. Vì scope sinhVienCNTT() và scope dangKyMonHocMyThuat(mssv) là khác nhau ^^. Trong trường hợp này, chúng ta không thể sử dụng biến trong scope này dùng cho scope khác được ^^.

function sinhVienCNTT() {
  // scope được tạo bởi function
  let tenSinhVien = 'Trang';
  let mssv = 1851120000;
  console.log(tenSinhVien); // Trang
}

function dangKyMonHocMyThuat(){
  console.log(mssv);
}
sinhVienCNTT();
dangKyMonHocMyThuat(); // mssv is not defined

Chúng ta có thể sử dụng tên biến giống nhau 😍 với scope khác nhau. Điều này có nghĩa là các bạn không phải lo xảy ra lỗi dùng tên biến giống nhau khi khác scope.

Ví dụ dưới đây ta sẽ thử sử dụng tên biến giống nhau cho 2 function:

function svCNTT() {
  // "svCNTT" function scope
  let name = 'Trang';
  console.log(name); // Trang
}
function svMyThuat() {
  // "svMyThuat" function scope
  let name = 'Ha';
  console.log(name); // Ha
}
svCNTT();
svMyThuat();

Ở trên, ta sẽ có kết quả là name có giá trị khác nhau. Có nghĩa là biến name trong svCNTT và svMyThuat là khác nhau, tuy cùng tên biến nhưng chúng không liên quan đến nhau ^^.

Tiếp theo ta cùng tìm hiểu trường hợp đặc biệt hơn, đó là trường hợp các scope lồng nhau hay Scopes nesting.

Scopes nesting

Sau khi đã hiểu về scope trong JavaScript, ta cùng tìm hiểu một trường hợp đặc biệt là scope nesting của scope nhé.

Bây giờ ta thử lồng nhiều function vào nhau và thử truy xuất biến ở scope này cho scope khác thử xem nhé.

function hamOBenNgoai() {
  // scope
  let text = 'outside';
  function hamOBenTrong() {
    // scope
    console.log(text); // outside
  }
  hamOBenTrong();
}
hamOBenNgoai();

Sau khi kiểm tra kết quả thì chúng ta thấy được ở scope hamOBenTrong vẫn có thể truy xuất được biến text ở scope hamOBenNgoai 😮. Đây chính là một điểm khá thú vị của scope, nó giúp ích cho chúng ta rất nhiều trong các bài toán ^^.

Qua tìm hiểu về scope trong JavaScript, mình xin tóm tắt lại 2 điểm cần nhớ về scope:

• Scope có thể lồng nhau (nested).
• Các biến ở scope ngoài có thể truy xuất được, khi ta sử dụng các biến này ở những scope nằm bên trong scope đó.

Kết luận

Như vậy là chúng ta đã tìm hiểu về scope trong JavaScript. Trong bài viết tiếp theo, chúng ta sẽ cùng nhau tìm hiểu về lexical scope trong JavaScript nhé. Hy vọng bài viết này sẽ giúp ích cho các bạn ^^.

Hẹn gặp lại các bạn trong bài viết tiếp theo 😘😁.