Biến toàn cục trong hàm trong JavaScript

Trong JavaScript (trong các ngôn ngữ khác thì thường không như vậy) các biến được định nghĩa bên ngoài hàm sẽ hiển thị được bên trong hàm đó. Những biến như vậy được gọi là toàn cục. Hãy xem ví dụ:

let num = 1; // biến ở bên ngoài hàm

function func() {
	console.log(num); // biến num hiển thị được bên trong hàm
}

func(); // sẽ hiển thị 1

Thực tế biến cần được định nghĩa không phải trước khi định nghĩa hàm, mà là trước khi gọi nó:

function func() {
	console.log(num);
}

let num = 1; // biến ở bên ngoài hàm
func();      // sẽ hiển thị 1

Nếu thay đổi giá trị của biến và sau đó mỗi lần gọi hàm - console.log mỗi lần sẽ hiển thị các kết quả khác nhau:

function func() {
	console.log(num);
}

let num; // khai báo biến

num = 1; // đặt giá trị là 1
func();  // sẽ hiển thị 1

num = 2; // đặt giá trị là 2
func();  // sẽ hiển thị 2

Nếu chúng ta có nhiều hàm, thì biến toàn cục sẽ khả dụng trong mỗi hàm trong số các hàm này:

function func1() {
	console.log(num);
}

function func2() {
	console.log(num);
}

let num = 1;

func1(); // sẽ hiển thị 1
func2(); // sẽ hiển thị 1

Nếu trong một trong các hàm có sự thay đổi với biến toàn cục, thì biến đó sẽ thay đổi trong tất cả các hàm sử dụng biến này:

function func1() {
	console.log(num);
	num++; // thay đổi biến toàn cục
}

function func2() {
	console.log(num);
}

let num = 1;

func1(); // sẽ hiển thị 1
func2(); // sẽ hiển thị 2

Vì bất kỳ hàm nào cũng có thể dễ dàng thay đổi biến toàn cục, nên việc sử dụng chúng là nơi sản sinh ra các lỗi khó nắm bắt. Vì lý do này, việc sử dụng biến toàn cục trong script cần được giảm thiểu đến mức tối đa. Tốt nhất là không nên có chúng hoặc chỉ có số lượng tối thiểu.

Xác định, không chạy code, điều gì sẽ được hiển thị trong console:

let num = 1;
		
function func() {
	console.log(num);
}

func();

Xác định, không chạy code, điều gì sẽ được hiển thị trong console:

let num = 1;
		
function func() {
	console.log(num);
}

num = 2;
func();

Xác định, không chạy code, điều gì sẽ được hiển thị trong console:

function func() {
	console.log(num);
}

let num;

num = 1;
func();

num = 2;
func();