Scope và Hoisting Là Gì Trong JavaScript?

Trong JavaScript, scope và hoisting là hai khái niệm quan trọng liên quan đến cách biến và hàm được định nghĩa, sử dụng và truy cập trong mã nguồn.

Scope (Phạm vi)

Scope (phạm vi) trong JavaScript xác định vùng hoạt động của các biến và hàm, tức là nơi mà các biến và hàm có thể được truy cập hoặc gọi.

1. Global Scope (Phạm vi toàn cục)

Các biến và hàm được khai báo bên ngoài tất cả các hàm hoặc khối mã có phạm vi toàn cục. Chúng có thể được truy cập ở bất kỳ đâu trong mã.

Ví dụ:

var globalVar = "I am global"; // Biến toàn cục

function displayGlobalVar() {
    console.log(globalVar); // Có thể truy cập biến toàn cục
}

displayGlobalVar(); // Output: I am global

2. Function Scope (Phạm vi hàm)

Các biến và hàm được khai báo bên trong một hàm có phạm vi hàm. Chúng chỉ có thể được truy cập bên trong hàm đó.

Ví dụ:

function myFunction() {
    var localVar = "I am local"; // Biến cục bộ
    console.log(localVar); // Có thể truy cập biến cục bộ
}

myFunction(); // Output: I am local
console.log(localVar); // Lỗi: localVar không được định nghĩa

3. Block Scope (Phạm vi khối)

Các biến được khai báo bằng let hoặc const bên trong một khối mã (ví dụ: trong một cặp ngoặc nhọn {}) có phạm vi khối. Chúng chỉ có thể được truy cập trong khối đó.

Ví dụ:

{
    let blockVar = "I am in a block";
    console.log(blockVar); // Có thể truy cập biến trong khối
}

console.log(blockVar); // Lỗi: blockVar không được định nghĩa

Hoisting (Nâng biến)

Hoisting là cơ chế của JavaScript trong đó các khai báo biến và hàm được "nâng lên" đầu phạm vi của chúng trước khi mã thực thi. Điều này có nghĩa là các khai báo biến và hàm có thể được sử dụng trước khi chúng được khai báo trong mã.

1. Hoisting của Biến (Variable Hoisting)

Các biến được khai báo bằng var được hoisting nhưng chỉ có phần khai báo được nâng lên đầu phạm vi, không phải phần gán giá trị.

Ví dụ:

console.log(hoistedVar); // Output: undefined
var hoistedVar = "I am hoisted";

Trên thực tế, đoạn mã trên được JavaScript xử lý như sau:

var hoistedVar;
console.log(hoistedVar); // Output: undefined
hoistedVar = "I am hoisted";

Biến khai báo bằng let và const cũng bị hoisting nhưng chúng không thể được truy cập trước khi khai báo, gây ra lỗi tham chiếu (ReferenceError).

Ví dụ:

console.log(hoistedLet); // Lỗi: hoistedLet không được định nghĩa
let hoistedLet = "I am hoisted with let";

2. Hoisting của Hàm (Function Hoisting)

Các hàm khai báo (function declaration) được hoisting toàn bộ, bao gồm cả phần khai báo và định nghĩa.

Ví dụ:

hoistedFunction(); // Output: I am a hoisted function

function hoistedFunction() {
    console.log("I am a hoisted function");
}

Tổng Kết:

• Scope (Phạm vi): Xác định vùng hoạt động của các biến và hàm.
  • Global Scope: Phạm vi toàn cục.
  • Function Scope: Phạm vi hàm.
  • Block Scope: Phạm vi khối.
• Hoisting (Nâng biến): Cơ chế trong đó các khai báo biến và hàm được nâng lên đầu phạm vi của chúng.
  • Variable Hoisting: Chỉ phần khai báo của biến var được hoisting.
  • Function Hoisting: Toàn bộ khai báo và định nghĩa của hàm được hoisting.