JavaScript: Error - variable already defined? What for?

Question

I use awesome JSLint to make sure my JavaScript is "strict".

When I use it, I get the following errors:

'hexRed', 'hexGreen', 'hexBlue', 'color' are already defined (referring to the "else if" clause)

My code is below. Any ideas how to fix my code to make its JavaScript "rigorous"?

function fade(currentStep, numSteps, currentRed, currentGreen, currentBlue, deltaRed, deltaGreen, deltaBlue) {

    if (currentStep < numSteps) {
        var hexRed   = zeroPad(currentRed.toString(16), 2);
        var hexGreen = zeroPad(currentGreen.toString(16), 2);
        var hexBlue  = zeroPad(currentBlue.toString(16), 2);
        var color = "#" + hexRed + hexGreen + hexBlue;

        document.getElementById('abc').style.backgroundColor = color;

        currentRed   += deltaRed;
        currentGreen += deltaGreen;
        currentBlue  += deltaBlue;

        timerID = setTimeout("fade(currentStep, numSteps, currentRed, currentGreen, currentBlue, deltaRed, deltaGreen, deltaBlue)", 70); 

    } else if (currentStep == numSteps) { 

        var hexRed   = endingRed.toString(16);  // <-- JSLint flags this line
        var hexGreen = endingGreen.toString(16);  // <-- JSLint flags this line
        var hexBlue  = endingBlue.toString(16);  // <-- JSLint flags this line
        var color = "#" + hexRed + hexGreen + hexBlue;  // <-- JSLint flags this line

        document.getElementById('abc').style.background = color;
    }
}

Answer 1

JavaScript overrides the function variables in which they reside, and not to the block between {and}.

For instance:

function test(){
   var i=0;
   if (i > 5) {
      var x = i + 1;
      alert(x);
   }
}

actually means:

function test(){
   var i, x;
   i = 0;
   if (i > 5) {
      x = i + 1;
      alert(x);
   }
}

You can think of all the variables that are actually created with "var" at the top of the function, but initialized with the value in which you first assigned it.

, , , .

Answer 2

:

function fade(...) {
    var hexRed, hexGreen, hexBlue, color;
    ...

Answer 3

var hexRed, hexGreen, hexBlue, color
, if
var

Answer 4

Javascript , c-. - global, function, with , , . if . , ,

function fade(currentStep, numSteps, currentRed, currentGreen, currentBlue, deltaRed, deltaGreen, deltaBlue) {

    var hexRed;
    var hexGreen;
    var hexBlue;  
    var color;
    var hexRed;
    var hexGreen;
    var hexBlue;  
    var color;


    if (currentStep < numSteps) {
         hexRed   = zeroPad(currentRed.toString(16), 2);
         hexGreen = zeroPad(currentGreen.toString(16), 2);
         hexBlue  = zeroPad(currentBlue.toString(16), 2);
         color = "#" + hexRed + hexGreen + hexBlue;

        document.getElementById('abc').style.backgroundColor = color;

        currentRed   += deltaRed;
        currentGreen += deltaGreen;
        currentBlue  += deltaBlue;

        timerID = setTimeout("fade(currentStep, numSteps, currentRed, currentGreen, currentBlue, deltaRed, deltaGreen, deltaBlue)", 70); 

    } else if (currentStep == numSteps) { 

         hexRed   = endingRed.toString(16);  // <-- JSLint flags this line
         hexGreen = endingGreen.toString(16);  // <-- JSLint flags this line
         hexBlue  = endingBlue.toString(16);  // <-- JSLint flags this line
         color = "#" + hexRed + hexGreen + hexBlue;  // <-- JSLint flags this line

        document.getElementById('abc').style.background = color;
    }
}

jslint , script . , , , "".