Making Sense of 'No Shadowed Variable' tslint Warning

Question

I have a function that checks for the current stage in a sequential stream, based on a particular discipline that is passed in, and, according to that value, assigns the nex

Answer 1

Locate and open your tslint.json file and set the following setting to false

 "no-shadowed-variable": false,

When using visual studio, a restart of visual studio might be required.

Answer 2

The linter complains because you are redefining the same variable multiple times. Thus replacing the ones in the closure containing it.

Instead of redeclaring it just use it:

private getNextStageStep(currentDisciplineSelected) {
    let nextStageStep = '';
        if (this.stageForDiscipline(this.currentDisciplineSelected) === 'step 1') {
             nextStageStep = 'step 2';
        } else if (this.stageForDiscipline(this.currentDisciplineSelected) === 'step 2') {
             nextStageStep = 'step 3';
        } else if (this.stageForDiscipline(this.currentDisciplineSelected) === 'step 3') {
             nextStageStep = 'step 4';
        } else if (this.stageForDiscipline(this.currentDisciplineSelected) === 'step 4') {
             nextStageStep = 'step 5';
        } else if (this.stageForDiscipline(this.currentDisciplineSelected) === 'step 5') {
             nextStageStep = 'step 6';
    }
    return nextStageStep;
}

Answer 3

You are re-declaring the same variable const nextStageStep in each if block.

Juste replace const nextStageStep = 'step 2'; with nextStageStep = 'step 2'; (and all the other if cases) and it'll be all right.

Answer 4

This has to do with defining the same variable in different scopes. You are defining nextStageStep within the function scope & also within each if block. One option is to get rid of the variable declarations in the if blocks

if (this.stageForDiscipline(this.currentDisciplineSelected) === 'step 1') {
   nextStageStep = 'step 2';
} else if (this.stageForDiscipline(this.currentDisciplineSelected) === 'step 2') {
   nextStageStep = 'step 3';
} else if (this.stageForDiscipline(this.currentDisciplineSelected) === 'step 3') {
   nextStageStep = 'step 4';
} else if (this.stageForDiscipline(this.currentDisciplineSelected) === 'step 4') {
   nextStageStep = 'step 5';
} else if (this.stageForDiscipline(this.currentDisciplineSelected) === 'step 5') {
   nextStageStep = 'step 6';
}

Here is a good resource on shadowed variables http://eslint.org/docs/rules/no-shadow

Answer 5

In general this error occurs When a variable in a local scope and a variable in the containing scope have the same name, shadowing occurs. Shadowing makes it impossible to access the variable in the containing scope and obscures to what value an identifier actually refers

Refer to this article for code samples explaining this.

Answer 6

First of all, even if you proceed with the warnings, your function "getNextStageStep()" will always return the empty value,

• Because "const" a is block-scoped variable, and

• It does not supports re-defining of value [Initialized value cannot be changed].

In return block variable "nextStageStep" contains empty string value, and inner blocks "nextStageStep" variables will not mask or override the outer block's "nextStageStep" variable value.

So whenever you return "nextStageStep", it will always return empty string.

Inner blocks "nextStageStep" variables scope is within that if block only and here outer block "nextStageStep" variable is completely different from inner block "nextStageStep" variables.

So if you want your code to work and if you must want to use const variables, then use multiple return statements within if blocks.

Below is the code I checked and working fine. you can use it according to your requirement.

function  getNextStageStep(currentDisciplineSelected) {
    const nextStageStep = '';
    if (currentDisciplineSelected === 'step 1') {
        const nextStageStep = 'step 2';
        return nextStageStep;
    } else if (currentDisciplineSelected === 'step 2') {
        const nextStageStep = 'step 3';
        return nextStageStep;
    } else if (currentDisciplineSelected === 'step 3') {
        const nextStageStep = 'step 4';
        return nextStageStep;
    } else if (currentDisciplineSelected === 'step 4') {
        const nextStageStep = 'step 5';
        return nextStageStep;
    } else if (currentDisciplineSelected === 'step 5') {
        const nextStageStep = 'step 6';
        return nextStageStep;
    }
    return nextStageStep;
}
console.log(getNextStageStep('step 1'));

But instead writing these many return statements better to use let variable which allows you to re-define the variable value. For your problem I think @toskv solution is suitable.