Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Defining JavaScript variables inside if-statements

People also ask

Can you define a variable in IF statement JavaScript?

Should you define a variable inside IF statement? Honestly, there's no right or wrong answer to this question. JavaScript allows it, so you can make your decision from there.

Can you define a variable in an if statement?

If you're new to the syntax that's used in the code sample, if (int i = 5) { is a perfectly valid way of declaring and defining a variable, then using it inside the given if statement. It allows us to write terser, clearer code, while also avoiding limiting the scope of a variable.

Can we use assignment operator in if condition in JavaScript?

Using the assignment operator in conditional expressions frequently indicates programmer error and can result in unexpected behavior. The assignment operator should not be used in the following contexts: if (controlling expression) while (controlling expression)

What are the 4 ways to declare a JavaScript variable?

4 Ways to Declare a JavaScript Variable:Using var. Using let. Using const. Using nothing.


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


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.


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.


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.)


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.