Defining JavaScript variables inside if-statements

Question

Is defining JavaScript variables inside if-statements correct?

if(a==1){
    var b = 1;
} else {
    var b = 0;
}

I know the code above will work, however, WebMatrix highlights the variables.

Should I define the variables outside the if-statement? Or the first option's correct? Or it doesn't really matter?

var b = '';
if(a==1){
    b = 1;
} else {
    b = 0;
}

comesuccingfuccslot · Accepted Answer · 2017-12-21 19:16:52Z

77

As of the official release of ES2017 spec (2017-07-08), EcmaScript does support true block scope now using the let or const keywords.

Since ECMAscript doesn't have block scope but function scope, its a very good idea to declare any variable on the top of your function contexts.

Even though you can make variable and function declarations at any point within a function context, it's very confusing and brings some weird headaches if you aren't fully aware of the consequences.

Headache example:

var foo = 10;

function myfunc() {
    if (foo > 0) {
        var foo = 0;
        alert('foo was greater than 0');
    } else {
        alert('wut?');
    }
}

Guess what, we're getting a 'wut?' alert when calling myfunc here. That is because an ECMAscript interpreter will hoist any var statement and function declaration to the top of the context automatically. Basically, foo gets initialized to undefined before the first if statement.

Further reading: JavaScript Scoping and Hoisting

edited Dec 21, 2017 at 19:16

comesuccingfuccslot

7177 silver badges16 bronze badges

answered Jul 17, 2012 at 23:07

jAndy

237k57 gold badges313 silver badges363 bronze badges

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

2 Comments

user8554766 Over a year ago

+1 for link JavaScript Scoping and Hoisting — it clears any confusions one might have on the topic

forestkelley Over a year ago

So what is the solution here if you don't want to redefine variables globally and do want to change a variable based on which path it takes through an if statement? Is creating an object and redefining the object property the only solution?

farhadf · Accepted Answer · 2017-01-18 23:49:12Z

4

Note that ECMAscript 6 does support block-level variables using the 'let' rather than the 'var' keyword. While variables declared with 'var' are hoisted to be function-scope regardless of where they are declared, those defined using 'let' are scoped to the enclosing block only.

answered Jan 18, 2017 at 23:49

farhadf

1,9783 gold badges20 silver badges29 bronze badges

Comments

user1466700 · Accepted Answer · 2012-07-17 23:09:34Z

2

Putting a var inside an if statement is not against "the rules" of the language, but it means that, because of var hoisting, that var will be defined regardless of whether the if statement's condition is satisfied.

answered Jul 17, 2012 at 23:09

user1466700

1 Comment

Adeerlike Over a year ago

what if i have something like if (a> b) { var text = $('.p-text').detach(); $('.p-options > *:nth-child(3)').after(text); } else { var text = $('.p-text').detach().appendTo('.p-info'); text.find('div[data-p-wrapper]').detach().prependTo(text); }

Neil · Accepted Answer · 2012-07-17 23:11:49Z

1

Because JavaScript's variables have function-level scope, your first example is effectively redeclaring your variable, which may explain why it is getting highlighted.

On old versions of Firefox, its strict JavaScript mode used to warn about this redeclaration, however one of its developers complained that it cramped his style so the warning was turned off. (Current versions of Firefox support a block-level variable declaration syntax.)

answered Jul 17, 2012 at 23:11

Neil

55.5k8 gold badges65 silver badges74 bronze badges

Comments

hcarver · Accepted Answer · 2017-06-17 06:16:03Z

1

See function four on What is the scope of variables in JavaScript?

As of 2012, there's no block-level scope in JavaScript. So your first version is fine: the variables are defined in the scope outside the if block.

edited Jun 17, 2017 at 6:16

answered Jul 17, 2012 at 23:07

hcarver

7,3445 gold badges44 silver badges67 bronze badges

3 Comments

WebWanderer Over a year ago

There is block level scope in JavaScript. The let keyword.

hcarver Over a year ago

Not yet there isn't! Let is currently a Release Candidate for ECMAScript version 6 (see developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…). So give it another 3 years and it might be widely implemented enough to be useful in the wild.

Septagram Over a year ago

Just for the sake of completeness, there are compilers, e.g., Babel (and maybe a few others) that can convert your next-generation JavaScript into plain old JavaScript, so you don't really have to wait another 3 years.

Collectives™ on Stack Overflow

Defining JavaScript variables inside if-statements

5 Answers 5

2 Comments

Comments

1 Comment

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

1 Comment

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related