Variable Shadowing in JavaScript Explained

Variable Shadowing in JavaScript Explained

Shadowing happens when a variable in an inner scope has the same name as a variable in an outer scope. The inner one "shadows" (hides) the outer one.

How Shadowing Works

const name = "Kunal";
function greet() {
  const name = "Asha"; // shadows the outer name
  console.log(name); // "Asha"
}
greet();
console.log(name); // "Kunal" (outer is unchanged)
``
Inside `greet`, `name` resolves to the local one. The engine finds it first and stops searching the scope chain. The outer `name` is hidden but not affected.

### Shadowing With `var`

```js
var x = 1;
function foo() {
  var x = 2; // shadows the outer x
  console.log(x); // 2
}
foo();
console.log(x); // 1
``
`var` shadowing works the same way. The inner `var` is hoisted to the top of the function with `undefined`, which can cause a bug:

```js
var name = "Kunal";
function greet() {
  console.log(name); // undefined (hoisted local shadows outer)
  var name = "Asha";
}
greet();
``
The local `var name` is hoisted, shadowing the outer one immediately. The first log sees `undefined`, not "Kunal".

### Block-Scoped Shadowing

```js
let x = 1;
if (true) {
  let x = 2; // shadows the outer x in this block
  console.log(x); // 2
}
console.log(x); // 1
``
`let` and `const` can shadow in blocks too. This is legal and sometimes useful, but can be confusing.

### Illegal Shadowing

There is one case where shadowing is illegal:

```js
let x = 1;
{
  var x = 2; // SyntaxError: Identifier 'x' has already been declared
}
``
You cannot shadow a `let` with a `var` in the same scope. `var` ignores block boundaries, so it would leak out and conflict. But shadowing a `var` with a `let` is fine:

```js
var x = 1;
{
  let x = 2; // legal
}
``
### Why Shadowing Matters

- **Readability**: shadowed names can confuse readers. Use distinct names.
- **Bugs**: `var` shadowing + hoisting causes the "undefined instead of outer value" bug.
- **Encapsulation**: sometimes shadowing is intentional to avoid polluting the outer scope.

### The Takeaway

Shadowing is when an inner variable hides an outer one with the same name. The inner one wins; the outer is unaffected but hidden. `var` shadowing + hoisting causes bugs. Shadowing a `let` with a `var` in the same scope is illegal. Use distinct names for clarity.