Making Sense of 'No Shadowed Variable' tslint Warning

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

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

Addording to : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const

ES6 const is BLOCK-SCOPED, thus:

{    const TAG='<yourIt>';    console.log(TAG); } {  const TAG = '<touchingBase NoImNOt="true">';  console.log(TAG); } console.log(TAG);  // ERROR expected

AFAICT, this is NOT a case of shadowing - each of the constants is soped correctly within its braces.

If we cannot re-use variable names, we will wind up with unreadable programs that obscure. rather than inform.

I believe the warning is wrong-headed