Kịch bản thuyết trình: Slides 76, 77, 78

Mình tiếp tục với slide 76, 77 và 78 về JavaScript Scope (Phạm vi biến trong hàm).

Scope là gì?

Scope (phạm vi) = nơi mà một biến có thể được truy cập (dùng được). Hiểu đơn giản: biến có "giới hạn" chỗ mà nó tồn tại.

Điều này giúp tránh xung đột tên biến, giữ code rõ ràng.

Các loại scope trong JavaScript

a. Global Scope (phạm vi toàn cục)

Biến khai báo ngoài tất cả các hàm → dùng được ở mọi nơi trong file.

Ví dụ:

let globalVar = "I am global";

function showGlobal() {
    console.log(globalVar); // OK
}

showGlobal();
console.log(globalVar); // OK

Biến globalVar được khai báo ngoài hàm, nên có thể dùng được cả trong hàm showGlobal() và ngoài hàm.

b. Function Scope (phạm vi trong hàm)

Biến khai báo bên trong hàm → chỉ tồn tại và dùng được trong hàm đó. Tức là biến trong function thì chỉ dùng được trong function, ra ngoài function biến không có tác dụng.

Ví dụ:

function testScope() {
    let localVar = "I am local";
    console.log(localVar); // OK
}

testScope();
console.log(localVar); // ❌ Error: localVar is not defined

Biến localVar chỉ tồn tại trong hàm testScope(). Khi ra ngoài hàm, biến này không còn tồn tại nữa, nên sẽ báo lỗi.

c. Block Scope (phạm vi khối lệnh)

Với letconst, biến chỉ tồn tại trong cặp { } nơi nó được khai báo.

(Ngược lại, var thì không có block scope, chỉ có function scope).

Ví dụ:

{
    let a = 10;
    const b = 20;
    var c = 30;

    console.log(a); // 10
    console.log(b); // 20
    console.log(c); // 30
}

console.log(c); // 30 (var không có block scope)
console.log(a); // ❌ Error: a is not defined
console.log(b); // ❌ Error: b is not defined

Biến ab (dùng letconst) chỉ tồn tại trong block { }, ra ngoài block sẽ báo lỗi.

Biến c (dùng var) không có block scope, nên vẫn dùng được ngoài block.

d. Nested Scope (Scope lồng nhau)

Scope có thể lồng nhau. Tham khảo thêm tại w3school để hiểu rõ hơn về nested scope.

Như vậy là mình đã trình bày xong về Scope trong JavaScript, bao gồm Global Scope, Function Scope, Block Scope và Nested Scope.