Shadowing

Shadowing trong JavaScript là khái niệm khi một biến hoặc hàm trong phạm vi con có cùng tên với một biến hoặc hàm trong phạm vi cha, dẫn đến việc biến hoặc hàm trong phạm vi con "che khuất" biến hoặc hàm cùng tên trong phạm vi cha. Điều này làm cho biến hoặc hàm trong phạm vi cha không thể truy cập trực tiếp từ phạm vi con nơi shadowing xảy ra.

1. Cách hoạt động của Shadowing

Shadowing với biến (var, let, const):

Khi một biến được khai báo trong một phạm vi nội tại (chẳng hạn như bên trong một hàm hoặc một block) có cùng tên với một biến trong phạm vi cha (như phạm vi toàn cục hoặc một hàm bên ngoài), biến trong phạm vi nội tại sẽ che khuất biến trong phạm vi cha.

Ví dụ với var:

var x = 10;

function example() {
  var x = 20; // Biến 'x' trong hàm này shadow biến 'x' ở phạm vi toàn cục
  console.log(x); // 20
}

example();
console.log(x); // 10 (Biến 'x' toàn cục không bị ảnh hưởng)

Ví dụ với let và const:

let y = 10;

if (true) {
  let y = 20; // Biến 'y' trong block này shadow biến 'y' ở phạm vi toàn cục
  console.log(y); // 20
}

console.log(y); // 10 (Biến 'y' toàn cục không bị ảnh hưởng)

Shadowing với hàm:

Shadowing cũng có thể xảy ra với hàm. Khi một hàm được khai báo trong phạm vi con có cùng tên với một hàm trong phạm vi cha, hàm trong phạm vi con sẽ shadow hàm trong phạm vi cha.

function greet() {
  console.log("Hello from global scope!");
}

function example() {
  function greet() {
    console.log("Hello from local scope!");
  }
  greet(); // "Hello from local scope!" (Hàm này shadow hàm global)
}

example();
greet(); // "Hello from global scope!" (Hàm global không bị ảnh hưởng)

Shadowing với let hoặc const trong phạm vi block và var trong phạm vi function:

• Khi let hoặc const được sử dụng trong một block (như trong một khối if, for, while), biến đó có phạm vi block, và sẽ shadow các biến cùng tên trong phạm vi cha.
• Tuy nhiên, nếu bạn sử dụng var, biến đó sẽ có phạm vi function hoặc toàn cục và sẽ shadow biến trong phạm vi bên ngoài.

var z = 30;

function outerFunction() {
  let z = 40; // Shadow biến 'z' ở phạm vi toàn cục

  if (true) {
    var z = 50; // Shadow biến 'z' trong phạm vi hàm
    console.log(z); // 50
  }

  console.log(z); // 50 (Biến 'z' với `var` đã shadow `let`)
}

outerFunction();
console.log(z); // 30 (Biến 'z' toàn cục không bị ảnh hưởng)

2. Những điều cần chú ý với Shadowing

• Phạm vi của biến: Luôn nhớ rằng các biến trong JavaScript có phạm vi xác định bởi nơi chúng được khai báo (toàn cục, function, block).
• Dễ gây nhầm lẫn: Shadowing có thể làm cho mã của bạn khó đọc và bảo trì hơn, vì bạn có thể không dễ dàng nhận ra rằng một biến hoặc hàm đang bị shadow bởi một biến hoặc hàm khác trong phạm vi con.
• Sử dụng cẩn thận: Khi sử dụng các biến có cùng tên trong nhiều phạm vi, hãy cẩn thận để tránh những lỗi logic hoặc hiểu nhầm.