JavaScript - Biến toàn cục

Chào mừng các bạn đang học lập trình! Hôm nay, chúng ta sẽ khám phá thế giới của các biến toàn cục trong JavaScript. Là người thầy máy tính gần gũi của bạn, tôi rất háo hức hướng dẫn bạn qua khái niệm quan trọng này. Tin tôi đi, hiểu về biến toàn cục giống như có một遥控 từ xa phổ biến cho mã của bạn - nó rất mạnh mẽ, nhưng bạn cần sử dụng nó một cách khôn ngoan!

JavaScript - Global Variables

Biến toàn cục trong JavaScript là gì?

Hãy bắt đầu từ cơ bản. Trong JavaScript, biến toàn cục là một biến có thể truy cập từ bất kỳ nơi nào trong mã của bạn. Nó giống như cậu học trò nổi tiếng ở trường mà ai cũng biết và có thể nói chuyện với. Các biến này được khai báo ngoài bất kỳ hàm nào hoặc không được khai báo với các từ khóa var, let, hoặc const.

Dưới đây là một ví dụ đơn giản:

let globalGreeting = "Hello, World!";

function sayHello() {
console.log(globalGreeting);
}

sayHello(); // Xuất: Hello, World!

Trong ví dụ này, globalGreeting là một biến toàn cục. Chúng ta có thể truy cập nó cả trong và ngoài hàm sayHello.

Mức độ видимости (Scope) trong JavaScript

Bây giờ, hãy nói về mức độ видимости. Trong JavaScript, "mức độ видимости" đề cập đến khả năng nhìn thấy của các biến. Mức độ видимости toàn cục là mức độ видимости ngoài cùng trong một chương trình JavaScript. Các biến được khai báo trong mức độ видимости toàn cục có thể được truy cập và thay đổi từ bất kỳ nơi nào trong chương trình.

Dưới đây là một ví dụ minh họa mức độ видимости toàn cục:

let globalVar = "I'm global!";

function testScope() {
console.log(globalVar); // Có thể truy cập globalVar ở đây
}

testScope(); // Xuất: I'm global!
console.log(globalVar); // Cũng có thể truy cập globalVar ở đây

Như bạn có thể thấy, globalVar có thể được truy cập cả trong và ngoài hàm. Nó giống như một thông báo công khai mà ai cũng có thể nghe thấy!

Ví dụ về biến toàn cục

Hãy cùng khám phá thêm một số ví dụ để củng cố hiểu biết của chúng ta về biến toàn cục.

Ví dụ 1: Nhiều hàm truy cập một biến toàn cục

let counter = 0;

function incrementCounter() {
counter++;
console.log("Counter value:", counter);
}

function resetCounter() {
counter = 0;
console.log("Counter reset to:", counter);
}

incrementCounter(); // Xuất: Counter value: 1
incrementCounter(); // Xuất: Counter value: 2
resetCounter();     // Xuất: Counter reset to: 0
incrementCounter(); // Xuất: Counter value: 1

Trong ví dụ này, cả hai hàm incrementCounter và resetCounter đều có thể truy cập và thay đổi biến toàn cục counter.

Ví dụ 2: Đối tượng toàn cục trong các trình duyệt web

Trong các trình duyệt web, mức độ видимости toàn cục được đại diện bởi đối tượng window. Bất kỳ biến toàn cục hoặc hàm nào đều trở thành thuộc tính của đối tượng window.

var globalVar = "I'm a global variable";
function globalFunction() {
console.log("I'm a global function");
}

console.log(window.globalVar);     // Xuất: I'm a global variable
window.globalFunction();           // Xuất: I'm a global function

Đây là lý do tại sao bạn đôi khi thấy window.alert() thay vì chỉ alert() - chúng là một điều!

Biến toàn cục tự động

Đây là một phần trick của JavaScript mà thường bắt đầu từ người mới: nếu bạn gán giá trị cho một biến chưa được khai báo, nó tự động trở thành một biến toàn cục. Điều này giống như vô tình làm日记 công khai!

function createGlobal() {
oops = "I'm accidentally global!";
}

createGlobal();
console.log(oops); // Xuất: I'm accidentally global!

Trong ví dụ này, oops trở thành một biến toàn cục mặc dù chúng ta không có ý định làm như vậy. Điều này thường được coi là một thực hành xấu và có thể dẫn đến các lỗi khó追踪. Hãy luôn khai báo các biến của bạn với var, let, hoặc const!

Cách tốt nhất và các pitfall tiềm ẩn

Mặc dù các biến toàn cục có thể hữu ích, nhưng chúng nên được sử dụng một cách tiết kiệm. Dưới đây là lý do:

Xung đột tên: Nếu bạn có rất nhiều biến toàn cục, bạn có thể vô tình sử dụng cùng một tên hai lần, dẫn đến hành vi không mong muốn.
Khó khăn trong việc bảo trì mã: Các biến toàn cục có thể làm cho mã của bạn khó hiểu và bảo trì, đặc biệt là trong các dự án lớn.
Khó khăn trong việc kiểm tra: Các hàm phụ thuộc vào các biến toàn cục khó khăn hơn để kiểm tra một cách cô lập.

Thay vì dựa vào các biến toàn cục, hãy cân nhắc sử dụng các biến cục bộ và truyền chúng làm đối số cho các hàm khi cần thiết.

// Thay vì này:
let name = "Alice";
function greet() {
console.log("Hello, " + name + "!");
}

// Hãy cân nhắc này:
function greet(name) {
console.log("Hello, " + name + "!");
}
greet("Alice");

Kết luận

Các biến toàn cục trong JavaScript giống như quảng trường của mã của bạn - dễ dàng truy cập bởi tất cả mọi người, nhưng tốt nhất là nên sử dụng một cách thận trọng. Mặc dù chúng có thể là công cụ mạnh mẽ, nhưng hãy nhớ rằng với quyền lực lớn đi kèm với trách nhiệm lớn! Khi bạn tiếp tục hành trình học JavaScript, bạn sẽ phát triển cảm giác cho biết khi nào nên sử dụng biến toàn cục và khi nào nên giữ chúng ở mức cục bộ.

Nhớ rằng, thực hành làm cho hoàn hảo. Hãy thử tạo ra các ví dụ riêng của bạn và thử nghiệm với các biến toàn cục. Đừng lo lắng nếu bạn phạm lỗi - đó là một phần của quá trình học tập. Chúc các bạn may mắn, những nhà lập trình JavaScript tương lai!

Phương pháp	Mô tả
`var`	Khai báo một biến toàn cục, hoặc cục bộ cho toàn bộ hàm không phụ thuộc vào block scope
`let`	Khai báo một biến cục bộ block scope, tùy chọn khởi tạo nó với một giá trị
`const`	Khai báo một biến không thay đổi block scope
`window.variableName`	Khai báo một biến toàn cục rõ ràng trong môi trường trình duyệt
Không có từ khóa	Khai báo một biến toàn cục ngầm (không khuyến khích)

Credits: Image by storyset

Hướng Dẫn Trước:

JavaScript - Phạm vi biến

Hướng Dẫn Tiếp Theo:

JavaScript - Tham số hàm thông minh