5.1 Phạm vi toàn cục
Phạm vi (scopes) xác định khả năng truy cập của các biến và hàm trong các phần khác nhau của chương trình. Trong JavaScript, có ba loại phạm vi chính: toàn cục, cục bộ và khối. Hiểu rõ các phạm vi này rất quan trọng để quản lý dữ liệu hiệu quả và tránh lỗi trong mã.
Phạm vi toàn cục bao gồm tất cả các biến và hàm được khai báo ngoài bất kỳ hàm hay khối mã nào. Những biến và hàm này có thể truy cập từ bất kỳ đâu trong mã.
Ví dụ 1: Khai báo biến toàn cục
var globalVar = 'I am a global variable';
function showGlobalVar() {
console.log(globalVar); // Truy cập biến toàn cục
}
showGlobalVar(); // Xuất: I am a global variable
console.log(globalVar); // Truy cập biến toàn cục
Ví dụ 2: Hàm toàn cục
Trong ví dụ này, biến globalVar và hàm globalFunction() được khai báo trong phạm vi toàn cục và có thể truy cập từ bất kỳ đâu trong mã.
function globalFunction() {
return 'I am a global function';
}
console.log(globalFunction()); // Xuất: I am a global function
5.2 Phạm vi cục bộ
Phạm vi cục bộ bao gồm các biến và hàm được khai báo bên trong hàm. Những biến và hàm này chỉ có thể truy cập bên trong hàm đó và không thể truy cập từ ngoài.
Ví dụ 3: Khai báo biến cục bộ
Trong ví dụ này, biến localVar được khai báo bên trong hàm localScopeExample() và không thể truy cập từ ngoài hàm:
function localScopeExample() {
var localVar = 'I am a local variable';
console.log(localVar); // Truy cập biến cục bộ
}
localScopeExample(); // Xuất: I am a local variable
console.log(localVar); // Lỗi: localVar is not defined
Ví dụ 4: Hàm cục bộ
Trong ví dụ này, hàm innerFunction() được khai báo bên trong hàm outerFunction() và
không thể truy cập từ ngoài outerFunction():
function outerFunction() {
function innerFunction() {
return 'I am a local function';
}
console.log(innerFunction()); // Truy cập hàm cục bộ
}
outerFunction(); // Xuất: I am a local function
console.log(innerFunction()); // Lỗi: innerFunction is not defined
5.3 Phạm vi khối
Phạm vi khối bao gồm các biến được khai báo bằng let và const bên trong một khối mã,
được giới hạn bởi dấu ngoặc nhọn {}. Những biến này chỉ có thể truy cập bên trong khối đó và không thể truy cập từ ngoài.
Ví dụ 5: Khai báo biến với let
Trong ví dụ này, biến blockVar được khai báo trong khối if và không thể truy cập từ ngoài khối:
if (true) {
let blockVar = 'I am a block-scoped variable';
console.log(blockVar); // Truy cập biến khối
}
console.log(blockVar); // Lỗi: blockVar is not defined
Ví dụ 6: Khai báo biến với const
Trong ví dụ này, biến i được khai báo trong khối for và không thể truy cập từ ngoài khối:
for (const i = 0; i < 3; i++) {
console.log(i); // Truy cập biến khối
}
console.log(i); // Lỗi: i is not defined
Đặc điểm của phạm vi khối
Ví dụ 7: Khối lồng nhau
Trong ví dụ này, biến innerVar chỉ có thể truy cập bên trong khối bên trong, trong khi biến outerVar có thể truy cập cả khối ngoài và khối trong:
if (true) {
let outerVar = 'I am in the outer block';
if (true) {
let innerVar = 'I am in the inner block';
console.log(outerVar); // Truy cập biến khối ngoài
console.log(innerVar); // Truy cập biến khối trong
}
console.log(outerVar); // Truy cập biến khối ngoài
console.log(innerVar); // Lỗi: innerVar is not defined
}
5.4 Tương tác giữa các phạm vi khác nhau
Ví dụ 8: Tương tác giữa phạm vi toàn cục và cục bộ
Trong ví dụ này, hàm scopeExample() có quyền truy cập đến biến toàn cục globalVar và biến cục bộ của nó localVar:
var globalVar = 'I am a global variable';
function scopeExample() {
var localVar = 'I am a local variable';
console.log(globalVar); // Truy cập biến toàn cục
console.log(localVar); // Truy cập biến cục bộ
}
scopeExample(); // Xuất: I am a global variable
// I am a local variable
console.log(globalVar); // Truy cập biến toàn cục
console.log(localVar); // Lỗi: localVar is not defined
Ví dụ 9: Phạm vi với arrow function
Trong ví dụ này, arrow function arrowFunction() có quyền truy cập đến biến toàn cục globalVar và biến cục bộ của nó localVar:
let globalVar = 'I am a global variable';
const arrowFunction = () => {
let localVar = 'I am a local variable in arrow function';
console.log(globalVar); // Truy cập biến toàn cục
console.log(localVar); // Truy cập biến cục bộ
};
arrowFunction(); // Xuất: I am a global variable
// I am a local variable in arrow function
console.log(globalVar); // Truy cập biến toàn cục
console.log(localVar); // Lỗi: localVar is not defined
GO TO FULL VERSION