CODEWITHSUNDEEP
javascriptvariables
Amir
Amir

Reputation: 4770

Why does my variable need a 'var' declaration, when it's already inside a var declaration?

If a mod can help me phrase my question better, I'd appreciate it because it's hard to ask this without simply providing an example. Here is a function that I've created:

$("#myField").on('keyup', function(event){
    var input = $(this), 
         val  = input.val(),
         inputGroup = input.parents('div.input-group')
         searchingIcon = $(inputGroup).find('i.auto-spinner'),
         button = $(inputGroup).find('span.input-group-btn > button.btn'),
         key = event.which,
         typingTimer; // This throws an error typingTimer is not defined

    //Clear typing timeout on keypress
    clearTimeout(typingTimer);
    //.... more code below.. not important
  });

As you can see, I like to declare my vars in one simple var declaration followed by commas, however, in this case when I get to typingTimer, I get a undefined var error, as though it's looking for the variable, instead of defining an empty variable. If I simply change things to this:

$("#myField").on('keyup', function(event){
    var input = $(this), 
         val  = input.val(),
         inputGroup = input.parents('div.input-group')
         searchingIcon = $(inputGroup).find('i.auto-spinner'),
         button = $(inputGroup).find('span.input-group-btn > button.btn'),
         key = event.which;
   var typingTimer; // All is well again...

    //Clear typing timeout on keypress
    clearTimeout(typingTimer);
    //.... more code below.. not important
  });

Everything will work fine. This isn't the first time I've come across this phenomenon, and I don't really know the cause for it. Are there some limitations on how I can define variables not separated by (;)?

Upvotes: 0

Views: 75

Answers (2)

apsillers
apsillers

Reputation: 116030

You are missing a comma after your inputGroup declaration, causing an automatic semicolon after that line. Thus, all subsequent assignments are not declarations; they are simply assignments..

We can illustrate the problem with your code more clearly by explicitly writing the implicit semicolon:

// declarations
var input = $(this), 
     val  = input.val(),
     inputGroup = input.parents('div.input-group');

// merely assignments
     searchingIcon = $(inputGroup).find('i.auto-spinner'),
     button = $(inputGroup).find('span.input-group-btn > button.btn'),
     key = event.which,
     typingTimer;

typingTimer does not exist, so using it in any way outside of the left-hand side of an assignment is invalid. The other assignment statements above are acceptable because they create implicit globals (since you are not in strict mode).

If you add a comma after the assignment of inputGroup, then the subsequent lines are declarations, as you expect.

Upvotes: 1

Mark
Mark

Reputation: 569

You're missing a comma after one of your declarations inputGroup = input.parents('div.input-group'). Since all of your other declarations are also an expression (they have an = sign after them), they're valid statements on their own (assigning the result to a global variable). typingTimer doesn't have such an assignment, though, so it's causing the undefined error.

Adding the missing comma will fix the problem.

Upvotes: 3

Related Questions