Why do I often see this Javascript construct/convention? (i.e. creating 'var foo;' on it's own line, instead of via assignment)

Question

I often see Javascript programmers do something like this:

function(index, input) {
  var $input;
  $input = $(input);
  return $input.data('foo', 'bar');
}

While what I would have thought to do was something like this:

function(index, input) {
  var $input = $(input);
  return $input.data('foo', 'bar');
}

Or in this particular case, actually this:

function(index, input) {
  return $(input).data('foo', 'bar');
}

What is the value of declaring 'var' on a single line, then assigning to them later? It seems to me that adding the extra lines only leads to possible problems (for example, someone could forget to add the 'var' and accidentally make global variables). So why do it this way?

Is this just a coding convention of some kind (readability, maybe?), or is there some fiddly thing with how JavaScript works internally that makes this construct more efficient somehow?

Answer 1

int this simple example it makes no difference as much as i can say. but in javascript var declarations in a function body are evaluated first. so it makes a lot of sense to add all var declarations at the top of the function, also if they are only used later.

a = "GLOBAL";

function x(){
    console.log(a);
    var a = "VAR";
    console.log(a);
}

x()

will print

undefined
VAR

and not

GLOBAL
VAR

Answer 2

What is the value of declaring 'var' on a single line, then assigning to them later?

There is none. It makes no difference one way or the other. Simple as that.

Answer 3

I think this is just a style thing.I'm partial to your second example as well, and often declare and assign multiple variables in the same statement. I can't think of any reason to do otherwise, and would argue that separating the two statements could just cause confusion later as your code grows.

Answer 4

Suppose you have a variable you need to keep in scope (or you're in strict mode) so you must declare your variables with var . However, you might not use that variable, depending on some condition. Consider:

var foo;
if(cond1) {
    foo = "something";
} else if(cond2) {
    foo = "something else";
} else if(cond3) {
    foo = "a third thing";
}

Without your opening var foo , you'll need to do:

if(cond1) {
    var foo = "something";
} else if(cond2) {
    var foo = "something else";
} else if(cond3) {
    var foo = "a third thing";
}

(This is primarily due out of maintenance concern -- you could get by with a single var foo = .. and let the rest be simply foo = ... , but as soon as you comment out or alter that case, the behavior of foo will change.)

It doesn't look as nice, and you've unconditionally declared foo in this scope (since declarations are hoisted to the top of the scope ). If this code were buried deep in some function, it might not be clear to a reader in the second case whether foo is declared or not.