Internet Explorer 7+8 executes variable declaration inside IF even if condition is false

Question

The following JavaScript works correctly in all browsers except IE 7 and 8:

if (typeof django != 'undefined') {
    console.log('Django admin loaded');
    var jQuery = django.jQuery;
}

This code is on top of a JavaScript file that is loaded both inside Django's admin interface and on our public pages. Django's admin loads its own jQuery, so we use that one preferably ...

However, IE 7 and 8 executes the variable assignment inside this if statement even if the condition (typeof django != 'undefined') is false. At the same time, the console.log() is not executed :-/ Removing the var keyword, the same code works perfectly also in IE 7 and 8:

if (typeof django != 'undefined') {
    console.log('Django admin loaded');
    jQuery = django.jQuery;
}

But why? That doesn't make any sense, does it?

Answer 1

ALL browsers will do this. It's called hoisting.

function test() {
    if( false) {
        var abc;
    }
    alert(abc); // expect ReferenceError, get undefined
}

Since you're defining jQuery, you probably want that as a global variable, so window.jQuery = django.jQuery should do just fine.

Answer 2

There is no such thing as block scope within javascript (please see here for more details of JS scoping: What is the scope of variables in JavaScript?).

Your initial code doesn't make much sense anyway - if you are trying to set the global jQuery variable, then your code should be:

if (typeof django != 'undefined') {
    console.log('Django admin loaded');
    jQuery = django.jQuery;
}

What you are seeing is probably a difference with how IE7 and 8 handle their JS scopes.

Answer 3

If you define the var keyword then you need to do like this:

if (typeof django != 'undefined') {
    console.log('Django admin loaded');
    var jQuery = django;
    django.jQuery; // or django = django.jQuery
}