What are shadowing and illegal shadowing?

Both shadowing and illegal shadowing refer to how variable names can "hide" or override others within nested scopes.

Shadowing occurs when a variable declared within a certain scope (like a function or block) has the same name as a variable declared in an outer scope. The inner variable shadows the outer one — meaning, the inner variable takes precedence in its own scope.

Let's take an example where the inner a inside func() shadows the outer variable a.

  let a = 10;

  function func() {
    let a = 20; // Shadows the outer 'a'
    console.log(a); // 20
  }

  func();
  console.log(a); // 10

Illegal shadowing in JavaScript refers to a syntax error that happens when you try to declare a block-scoped variable (let or const) with the same name as a variable declared using var in the same or an overlapping scope.

For example, if you declare both block-scoped variable and function scoped variable using the same name inside a function causes an illegal shadowing.

  function test() {
    var a = 10;
    let a = 20; // SyntaxError: Identifier 'a' has already been declared
  }

As an another example, if you declare a variable with let or const in an outer scope, and then try to redeclare it with var inside a nested block, JavaScript throws an error — even though var is supposed to be function-scoped. Since the var appears in a block, it ends up trying to overwrite the let in the outer scope, which causes a conflict.

  let a = 10;
  {
    var a = 20; // SyntaxError: Identifier 'a' has already been declared
    console.log(a);
  }