Scope js 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

# 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

# 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

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 😘😁.

Scope trong JavaScript là gì?

Scopes nesting

Kết luận

Bài Viết Liên Quan

Toplist mới

Bài mới nhất

Chủ Đề