Tên biến giống nhau trong hàm trong JavaScript

Giả sử bên ngoài hàm và bên trong hàm đều có biến num. Trong trường hợp này, mọi thay đổi đối với biến cục bộ num sẽ không ảnh hưởng đến biến toàn cục num:

javascriptlet num = 1; // biến toàn cục

function func() {
  let num = 2; // biến cục bộ
  console.log(num);
}
func(); // gọi hàm, sẽ xuất ra 2

console.log(num); // sẽ xuất ra 1 - biến toàn cục không thay đổi

Nhưng, nếu chúng ta quên khai báo biến cục bộ num bằng let, thì bên trong hàm sẽ không tạo ra biến cục bộ num, mà chỉ đơn giản là thay đổi biến toàn cục:

javascriptlet num = 1;

function func() {
  num = 2; // quên viết let - đang thay đổi biến bên ngoài
  console.log(num);
}
func(); // gọi hàm, sẽ xuất ra 2

console.log(num); // sẽ xuất ra 2 - biến đã thay đổi

Ở đây có thể có hai tình huống: hoặc chúng ta thực sự muốn thay đổi biến toàn cục (khi đó mọi thứ đều ổn), hoặc chúng ta đã quên let và vô tình thay đổi biến toàn cục.

Tình huống thứ hai là một lỗi khó phát hiện, dẫn đến hành vi không thể đoán trước của script. Vì vậy, luôn luôn khi khai báo một biến mới, hãy khai báo nó bằng let.

javascriptlet num = 1;

function func() {
  num = 2;
}
func();

console.log(num);

javascriptlet num = 1;

function func() {
  let num = 2;
}
func();

console.log(num);