Global Scope, Local Scope and Block Scope trong Javascript


1. Global and Local Scope

Hôm nay ta sẽ tìm hiểu về scope hay gọi nôm na là phạm vi hoạt động của biến var, let và hằng const. Hãy xem ví dụ sau:

// Global Scope
var myVar = 1;
let myLet = 2;
const myConst = 3;

function test(){
  // Local Scope
  var myVar = 11;
  var myLet = 12;
  var myConst = 13;
  console.log("Function scope:");
  console.log("myVar = " + myVar); // myVar= 11
  console.log("myLet = " + myLet); // myLet = 12
  console.log("myConst = " + myConst); // myConst = 13
 
}
// gọi hàm test
test();
// myVar = 11
// myLet = 12
// myConst = 13

console.log("Global scope:");
console.log("myVar = " + myVar); // myVar= 1
console.log("myLet = " + myLet); // myLet = 2
console.log("myConst = " + myConst); // myConst = 3

Ta thấy rằng những biến khai báo trong function là local scope chỉ có ý nghĩa local bên trong function, mặc dùng biến và hằng đều cùng tên với biến và hằng bên ngoài nhưng khi thoát khỏi hàm thì dùng những biến và hằng bên ngoài (GLobal). Vậy thì Local scope chỉ có ý nghĩa bên trong function. Còn Global Scope thì có thể dùng bên ngoài hoặc bên trong function luôn. Xem ví dụ sau:

var myVar = 1;
let myLet = 2;
const myConst = 3;

function test(){
 console.log("myVar = " + myVar);
 console.log("myLet = " + myLet);
 console.log("myConst = " + myConst);
}

test();

3. Global and Block Scope

Xem ví dụ sau:

// Global Scope
var myVar = 1;

if(true) {
 // Block Scope
  var myVar = 2;
  console.log("Block scope: myVar =" + myVar); 
 //Block scope: myVar = 2
}
console.log("Global scope: myVar = " + myVar); 
//Global scope: myVar = 2

Block là code nằm trong dấu {...}. Ta thấy ví dụ trên nếu dùng var thì phải chú ý vì khi ta khai báo biến trong block cùng tên với biến bên ngoài thì có nghĩa là ta đặt lại gía trị của biến bên ngoài (global). Do đó Javascript đưa ra khai báo biến với let.

Ta xem ví dụ sau về block scope nhé

// Global Scope
let myLet = 1;

if(true) {
 // Block Scope
  let myLet = 2;
  console.log("Block scope: myLet =" + myLet); 
 //Block scope: myLet = 2
}
console.log("Global scope: myLet = " + myLet); 
//Global scope: myLet = 1


Khi dùng let thì biến chỉ có ý nghĩa bên trong block. Ta xem ví dụ sau để hiểu hơn về block scope.

var i = 0;

for(i=0; i<=2; i++){
 console.log(i);
}
console.log("var i = "+ i);

Ta thấy ban đầu khai báo i = 0 là biến global, trong vòng lặp for do ta dùng tên biến là i luôn nên khi tăng biến i lên thì biến i này chính là biến i global , nên khi i = 3 thì thoát khỏi vòng for, thì biến i của global cũng thay đổi theo chính vì điều này bên trong block ta nên dùng let. Ta xem ví dụ sau sẽ rõ.

let i = 0;

for(let i=0; i<=2; i++){
 console.log(i);
}
console.log("let i = "+ i);

Khi ta khai báo let i bên trong block thì khi i này tăng thì chỉ có ý nghĩa trong block. vậy biến i bên ngoài không đổi.

Wow, vậy là ta đã biết Global , local and Block scope rồi phải không nào?