Shadowing: When Names Collide

What happens if an inner scope creates a variable with the same name as one in an outer scope?

const name = "Global Gary";

function introduce() {
  const name = "Local Lucy";
  console.log(`Inside: ${name}`);
}

introduce();
console.log(`Outside: ${name}`);

Inside: Local Lucy
Outside: Global Gary

Inside the function, the inner name hides the outer one. This is called shadowing: the inner variable casts a shadow over the outer one, so the outer one can't be seen from inside. The outer variable isn't changed at all; it's just temporarily hidden.

Shadowing is allowed, but it can be confusing to read. ("Wait, which name is this?") Where you can, give your variables different, descriptive names.