JavaScript - Vùng Phạm Vi Biến

Xin chào các pháp sư JavaScript tương lai! Hôm nay, chúng ta sẽ bắt đầu một hành trình thú vị vào thế giới của vùng phạm vi biến. Đừng lo lắng nếu bạn mới bắt đầu học lập trình - tôi sẽ là người hướng dẫn thân thiện của bạn, và chúng ta sẽ cùng khám phá khái niệm này, từng bước một. Nào, lấy键盘 (phím ảo) của bạn, và hãy cùng lặn vào!

Vùng Phạm Vi Biến trong JavaScript

Vùng phạm vi biến giống như sân chơi nơi các biến của bạn có thể chơi. Nó xác định biến của bạn có thể hiển thị và được sử dụng ở đâu trong mã của bạn. Hãy tưởng tượng nó như là "khoảng cách nhìn thấy" của các biến. Hãy bắt đầu với một ví dụ đơn giản:

let globalVar = "Tôi có thể nhìn thấy mọi nơi!";

function sayHello() {
console.log(globalVar);
let localVar = "Tôi chỉ có thể nhìn thấy trong hàm này!";
console.log(localVar);
}

sayHello();
console.log(globalVar);  // Điều này hoạt động
console.log(localVar);   // Điều này sẽ gây ra lỗi

Trong ví dụ này, globalVar giống như đứa trẻ nổi tiếng ở trường - ai cũng biết và có thể nói chuyện với nó. Nhưng localVar giống như đứa trẻ nhút nhát chỉ ra ngoài trong lớp học nghệ thuật (hàm sayHello).

Vùng Phạm Vi Block trong JavaScript

Bây giờ, hãy nói về vùng phạm vi block. Trong JavaScript, một block được xác định bởi dấu ngoặc móc {}. Các biến được khai báo với let và const là block-scoped, có nghĩa là chúng chỉ可见 trong block chúng được khai báo.

if (true) {
let blockScopedVar = "Tôi chỉ có thể nhìn thấy trong block này!";
console.log(blockScopedVar);  // Điều này hoạt động
}

console.log(blockScopedVar);  // Điều này sẽ gây ra lỗi

Hãy tưởng tượng vùng phạm vi block như một nhà câu lạc bộ bí mật. Chỉ có những đứa trẻ cool (các biến) trong nhà câu lạc bộ (block) mới biết握手 bí mật ( có thể truy cập các biến).

Vùng Phạm Vi Hàm trong JavaScript

Vùng phạm vi hàm giống như một phòng riêng cho các biến của bạn. Bất kỳ biến nào được khai báo trong hàm chỉ có thể truy cập trong hàm đó. Hãy xem một ví dụ:

function outer() {
let outerVar = "Tôi ở trong hàm ngoài!";

function inner() {
let innerVar = "Tôi ở trong hàm trong!";
console.log(outerVar);  // Điều này hoạt động
console.log(innerVar);  // Điều này hoạt động
}

inner();
console.log(outerVar);  // Điều này hoạt động
console.log(innerVar);  // Điều này sẽ gây ra lỗi
}

outer();

Ở đây, outerVar giống như một người cha có thể peek vào phòng của con mình (inner hàm), nhưng các món đồ chơi của con (innerVar) ở lại trong phòng của con.

Vùng Phạm Vi Cục Bộ trong JavaScript

Vùng phạm vi cục bộ đề cập đến các biến chỉ có thể truy cập trong một phần cụ thể của mã của bạn. Điều này có thể là trong một hàm (vùng phạm vi hàm) hoặc một block (vùng phạm vi block). Hãy xem một ví dụ phức tạp hơn:

let globalVar = "Tôi là toàn cục!";

function outerFunction() {
let outerVar = "Tôi đến từ hàm ngoài!";

if (true) {
let blockVar = "Tôi đến từ block!";
var functionVar = "Tôi có thể nhìn thấy suốt hàm này!";

console.log(globalVar);    // Hoạt động
console.log(outerVar);     // Hoạt động
console.log(blockVar);     // Hoạt động
console.log(functionVar);  // Hoạt động
}

console.log(globalVar);    // Hoạt động
console.log(outerVar);     // Hoạt động
console.log(functionVar);  // Hoạt động
console.log(blockVar);     // Lỗi!
}

outerFunction();
console.log(globalVar);    // Hoạt động
console.log(outerVar);     // Lỗi!
console.log(functionVar);  // Lỗi!
console.log(blockVar);     // Lỗi!

Ví dụ này giống như một buổi聚会 lớn. globalVar là tổ tiên mà ai cũng biết. outerVar là như một người cha, được biết trong gia đình outerFunction. blockVar là như một cousin nhút nhát chỉ xuất hiện trong một phòng (block if). functionVar, được khai báo với var, là như một chú bác lớn tiếng mà mọi người trong hàm có thể nghe thấy.

Bây giờ, hãy tóm tắt các loại khai báo biến và vùng phạm vi của chúng trong bảng tiện ích:

Khai báo	Vùng Phạm Vi	Lifting	Có thể Thay Đổi
var	Hàm	Có	Có
let	Block	Không	Có
const	Block	Không	Không

Nhớ rằng var là đứa trẻ old-school cool kid có thể không đáng tin cậy. let và const là những đứa trẻ mới trên block chơi theo quy tắc nghiêm ngặt hơn.

Hiểu về vùng phạm vi biến rất quan trọng trong JavaScript. Nó giúp bạn viết mã sạch sẽ, hiệu quả hơn và tránh được những lỗi khó chịu. Luôn nhớ khai báo các biến của bạn trong vùng phạm vi phù hợp và cẩn thận với nơi bạn muốn truy cập chúng.

Khi chúng ta kết thúc bài học này, hãy tưởng tượng mã của bạn như một thành phố tổ chức tốt. Biến toàn cục là các công viên công cộng mà ai cũng có thể ghé thăm. Vùng phạm vi hàm là như các tòa nhà với các tầng khác nhau (block), mỗi tầng có các phòng riêng (vùng phạm vi cục bộ). Bằng cách giữ các biến của bạn trong "nhà" của chúng, bạn sẽ tạo ra một thành phố JavaScript hài hòa và vận hành tốt!

Tiếp tục luyện tập, và sớm bạn sẽ thành thạo về vùng phạm vi biến. Đến gặp lại lần sau, chúc bạn lập trình vui vẻ!

Credits: Image by storyset