javascript - 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 next value in my Angular 2 app. It looks something like this:

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

What I'm doing here is returning the value of nextStageStep, because that's what I'll be then passing in order for the correct stage step to happen.

Right now, my tslint is underlining each of the nextStageStep variable occurrences with the warning no shadowed variables. If I remove the line where I initialize to an empty string that warning goes away, but then I get the error, Cannot find nextStageStep showing up in my return statement.

What is the issue with the original shadowed variable warning, and is there an alternative way to write this, and/or should I simply ignore the tslint warning in this situation?

Answer 1

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;
}