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 because the answer explains what's happening here. (I'm sure there are dozens of other questions about hoisting.) — Evan Davis
– Evan Davis, Commented Aug 5, 2013 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
– projeqht, Commented Aug 5, 2013 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
– Evan Davis, Commented Aug 5, 2013 at 17:38

jbabey · Accepted Answer · 2013-08-05 17:16:05Z

6

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 5, 2013 at 17:16

jbabey

46.7k12 gold badges73 silver badges94 bronze badges

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

6 Comments

apsillers Over a year ago

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"?)

jbabey Over a year ago

@apsillers "incorrect" meaning a bad practice that static analysis tools (jslint, jshint, resharper, etc) will flag

Evan Davis Over a year ago

@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?)

apsillers Over a year ago

@Mathletics Yes, see EMCAScript 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.

Evan Davis Over a year ago

@apsillers perfect, that's what I wanted to see. Thanks!

|

Dave Newton · Accepted Answer · 2013-08-05 17:15:50Z

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 5, 2013 at 17:15

Dave Newton

161k27 gold badges263 silver badges310 bronze badges

Comments

SLaks · Accepted Answer · 2013-08-05 17:14:40Z

2

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

JSHint will complain about it.

answered Aug 5, 2013 at 17:14

SLaks

891k182 gold badges1.9k silver badges2k bronze badges

1 Comment

Evan Davis Over a year ago

The parser won't, though.

Collectives™ on Stack Overflow

Declare var before assigning multiple values in Javascript?

3 Answers 3

6 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related