noShadow

JavaScript (and super languages)

Summary

Diagnostic Category: lint/nursery/noShadow
This rule doesn’t have a fix.
The default severity of this rule is information.
Sources:
- Same as no-shadow

Description

Disallow variable declarations from shadowing variables declared in the outer scope.

Shadowing is the process by which a local variable shares the same name as a variable in its containing scope. This can cause confusion while reading the code and make it impossible to access the global variable.

Examples

Invalid

1
const foo = "bar";
2
if (true) {
3
   const foo = "baz";
4
}

code-block.js:3:10 lint/nursery/noShadow ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ This variable shadows another variable with the same name in the outer scope.
  
    1 │ const foo = “bar”;
    2 │ if (true) {
  > 3 │    const foo = “baz”;
      │          ^^^
    4 │ }
    5 │ 
  
  ℹ This is the shadowed variable, which is now inaccessible in the inner scope.
  
  > 1 │ const foo = “bar”;
      │       ^^^
    2 │ if (true) {
    3 │    const foo = “baz”;
  
  ℹ Consider renaming this variable. It’s easy to confuse the origin of variables if they share the same name.

Variable declarations in functions can shadow variables in the outer scope:

1
const foo = "bar";
2
const bar = function () {
3
    const foo = 10;
4
}

code-block.js:3:11 lint/nursery/noShadow ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ This variable shadows another variable with the same name in the outer scope.
  
    1 │ const foo = “bar”;
    2 │ const bar = function () {
  > 3 │     const foo = 10;
      │           ^^^
    4 │ }
    5 │ 
  
  ℹ This is the shadowed variable, which is now inaccessible in the inner scope.
  
  > 1 │ const foo = “bar”;
      │       ^^^
    2 │ const bar = function () {
    3 │     const foo = 10;
  
  ℹ Consider renaming this variable. It’s easy to confuse the origin of variables if they share the same name.

Function argument names can shadow variables in the outer scope:

1
const foo = "bar";
2
function bar(foo) {
3
    foo = 10;
4
}

code-block.js:2:14 lint/nursery/noShadow ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ This variable shadows another variable with the same name in the outer scope.
  
    1 │ const foo = “bar”;
  > 2 │ function bar(foo) {
      │              ^^^
    3 │     foo = 10;
    4 │ }
  
  ℹ This is the shadowed variable, which is now inaccessible in the inner scope.
  
  > 1 │ const foo = “bar”;
      │       ^^^
    2 │ function bar(foo) {
    3 │     foo = 10;
  
  ℹ Consider renaming this variable. It’s easy to confuse the origin of variables if they share the same name.

Valid

1
const foo = "bar";
2
if (true) {
3
   const qux = "baz";
4
}

How to configure

1
{
2
  "linter": {
3
    "rules": {
4
      "nursery": {
5
        "noShadow": "error"
6
      }
7
    }
8
  }
9
}