Shadowing and Hoisting Interview Questions in JavaScript

Shadowing and Hoisting Interview Questions in JavaScript

Shadowing combined with hoisting is one of the most common interview traps. Here are the questions you need to know.

Q1: What is the output?

var x = 1;
function foo() {
  console.log(x);
  var x = 2;
  console.log(x);
}
foo();
console.log(x);
``
**Answer**: `undefined`, `2`, `1`. The inner `var x` is hoisted with `undefined`, shadowing the outer. First log sees `undefined`, then `2`. The outer `x` is unchanged.

### Q2: What is the output?

```js
let x = 1;
{
  console.log(x);
  let x = 2;
}
``
**Answer**: `ReferenceError`. The inner `let x` is hoisted (shadowing the outer) and is in the TDZ. It does not fall back to the outer `x`.

### Q3: What is the output?

```js
var x = 1;
function foo() {
  console.log(x);
  let x = 2;
}
foo();
``
**Answer**: `ReferenceError`. The inner `let x` is hoisted (shadowing the outer) and is in the TDZ. It does not fall back to the outer `x`, even though the outer is `var`.

### Q4: What is the output?

```js
let a = 1;
function foo() {
  console.log(a);
  var a = 2;
}
foo();
``
**Answer**: `SyntaxError: Identifier 'a' has already been declared`. You cannot shadow a `let` with a `var` in the same scope (the function scope here includes the `let` from the parameter/outer check). Actually, this specific case depends on scope: the outer `let a` is in the global scope, the inner `var a` is in the function scope. So it is legal and the output is `undefined` (hoisted `var` shadows the outer `let`).

### Q5: What is the output?

```js
for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 0);
}
``
**Answer**: `3, 3, 3`. `var` is function-scoped; all callbacks share one `i`, which is `3` by the time they run.

### Q6: What is the output?

```js
for (let i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 0);
}
``
**Answer**: `0, 1, 2`. `let` creates a fresh binding per iteration; each callback closes over its own `i`.

### Q7: What is the output?

```js
let x = 1;
{
  var x = 2;
}
``
**Answer**: `SyntaxError: Identifier 'x' has already been declared`. You cannot shadow a `let` with a `var` in the same scope (the `var` leaks out of the block).

### Tips for Interviews

- Identify whether the inner declaration is `var`, `let`, or `const`.
- `var` is hoisted with `undefined` and shadows the outer immediately.
- `let`/`const` are hoisted but in the TDZ; they shadow the outer and throw if accessed early.
- Check for illegal shadowing (`let` + `var` in the same scope).
- Walk through the memory phase first, then the execution phase.

### The Takeaway

Shadowing + hoisting interview questions test: `var` hoisting with `undefined` (shadows outer), `let`/`const` TDZ (shadows outer and throws if accessed early), illegal shadowing (`let` + `var` in the same scope), and the loop closure bug. Walk through the memory phase for each `let`/`const` and `var`.