Declare var before assigning multiple values in Javascript?

Question

In Javascript, which format of var declarations is better:

function test1() {
  switch(type) {
    case 1:
        var test = "Hello One"
      break;
    case 2:
        var test = "Hello Two"
      break;
  }
}

Or:

function test2() {
  var test;

  switch(type) {
    case 1:
        test = "Hello One"
      break;
    case 2:
        test = "Hello Two"
      break;
  }
}

In test2(), there is 1 extra line of code to declare test as a var before assigning a value, but this saves having to declare var test twice. Is either way better than the other?

possible duplicate of [javascript var declaration within loop](http://stackoverflow.com/questions/2731123/javascript-var-declaration-within-loop) __because the answer explains what's happening here.__ (I'm sure there are dozens of other questions about hoisting.) — Evan Davis, Aug 05 '13 at 17:20
Well, actually I was asking more about the syntax of it, more than what was going on with the scoping. It's nice to learn about the term "javascript hoisting" though! — projeqht, Aug 05 '13 at 17:32
I get that, but the explanation of what's happening explains why one syntax is preferred. You sort of can't ask one without the other. — Evan Davis, Aug 05 '13 at 17:38

score 7 · Accepted Answer · answered Aug 05 '13 at 17:16

7

javascript does not have block scope, so declaring variables in a switch block does not work like you would expect.

furthermore, due to variable hoisting, all variable declarations in a function block are hoisted to the top by the interpreter and your code would look like this:

function test1() {
  var test;
  var test;

  switch(type) {
    case 1:
        test = "Hello One"
      break;
    case 2:
        test = "Hello Two"
      break;
  }
}

After performing the hoist, it is easy to see why the first block is incorrect.

answered Aug 05 '13 at 17:16

jbabey

45,965
12
71
94

1

Could you clarify what you mean by "incorrect" in your final sentence? Both examples are valid and behave identically. (I'm not disagreeing with anything you're saying in this answer, but I think it would be helpful to use a more precise term than "incorrect" -- perhaps "less clear"?) – apsillers Aug 05 '13 at 17:32
@apsillers "incorrect" meaning a bad practice that static analysis tools (jslint, jshint, resharper, etc) will flag – jbabey Aug 05 '13 at 17:35
@apsillers is it really _valid_? (Is there a spec line stating that declaring the same variable more than once is acceptable, or is it just ignored in implementation?) – Evan Davis Aug 05 '13 at 17:36
5

@Mathletics Yes, see [EMCAScript 10.5](http://www.ecma-international.org/ecma-262/5.1/#sec-10.5), step 8: for each VariableDeclaration with some identier `dn`, the interpreter checks if a variable with identifier `dn` is already declared in-scope, and only acts if it does not yet exist. – apsillers Aug 05 '13 at 17:38
@apsillers perfect, that's what I wanted to see. Thanks! – Evan Davis Aug 05 '13 at 17:39
@jbabey Thanks, that's a good example of something "going wrong" with the first. – apsillers Aug 05 '13 at 17:40

score 4 · Answer 2 · answered Aug 05 '13 at 17:15

4

IMO the second should be preferred.

It's more communicative, and closer to what's actually happening (e.g., variable hoisting).

I'm also not a fan of hiding variable declarations inside what look like scopes but aren't.

answered Aug 05 '13 at 17:15

Dave Newton

158,873
26
254
302

score 2 · Answer 3 · answered Aug 05 '13 at 17:14

2

Your first code is wrong; you've declared the same variable multiple times.

JSHint will complain about it.

answered Aug 05 '13 at 17:14

SLaks

868,454
176
1,908
1,964

4

The parser won't, though. – Evan Davis Aug 05 '13 at 17:14

Declare var before assigning multiple values in Javascript?

3 Answers3