JavaScript: Error - variable already defined? Why?

Question

I'm using the awesome JSLint tool to ensure my JavaScript is "strict".

When I use it however, 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 it JavaScript "strict"?

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

Jakob · Accepted Answer · 2010-11-12 15:40:18Z

6

JavaScript scopes variables to the function they're in, not to the block between { and }.

For example:

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 is as all variables actually being created with "var" at the top of the function, but initialized to a value where you first assign it.

To fix your issues, simply make this explicit by declaring the variables at the top of your function, like I did in the second code snippet above.

answered Nov 12, 2010 at 15:40

Jakob

24.5k9 gold badges48 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

kanaka · Accepted Answer · 2010-11-12 15:39:27Z

1

Declare your variables at the top of the function once:

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

answered Nov 12, 2010 at 15:39

kanaka

73.7k24 gold badges148 silver badges143 bronze badges

6 Comments

Chris Baxter Over a year ago

Actually, this is bad... var hexRed is declared in the function scope, all others are actually declared at the window level

Jakob Over a year ago

@Calgary: That cant be right. Crockford's tool recommends you to use a single var-statement for every function and that would be insane if hexGreen, hexBlue and color were declared at window level.

Chris Baxter Over a year ago

@Jakob - Mental lapse it would seem

kanaka Over a year ago

@Calgary: JSLint is complaining because the variables are defined multiple times in his function (not window scope). Also, JSLint wants one var statement per scope block.

Marcel Korpel Over a year ago

@Calgary: Just to be sure: don't forget about the , operator. ;)

|

eych · Accepted Answer · 2010-11-12 15:39:42Z

1

put var hexRed, hexGreen, hexBlue, color
as the first line in your function, before the if
remove all other var declarations

answered Nov 12, 2010 at 15:39

eych

1,2722 gold badges18 silver badges37 bronze badges

Comments

lincolnk · Accepted Answer · 2010-11-12 15:51:00Z

Javascript scoping doesn't work like other c-style languages. There are only a few possible scope levels- global, function, with, and maybe another odd one or two. the if statement does not create a new scope. What you are doing is effectively

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

which is why jslint is complaining, although your script should still work. This process where the variable declaration is put in the right scope regardless of where the statement exists is known as "hoisting".

Collectives™ on Stack Overflow

JavaScript: Error - variable already defined? Why?

4 Answers 4

Comments

6 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

6 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related