"use strict"; + jQuery.getScript() = script can't export to global namespace

Question

Suppose I have the following script, called include_strict.js. After it executes I should have window.global1 defined:

"use strict";

var globalVar = {};
alert(typeof window.globalVar);

But if I include it from a block of javascript with

$.getScript("include_strict.js");

The alert says undefined. Why? What is going on here?

FYI, that's not what happens if I include the file using a script tag:

<script type="text/javascript" src="include_strict.js"></script>

Here, I see the expected alert, object. And if I remove "use strict";, then both jQuery.getScript() and <script>; have the same effect of displaying object.

I've created an example (https://docs.google.com/file/d/0B-XXu97sL1Ckb0x0OHptTmVMY00/edit) to demonstrate this.

Pskov

Answer 1

It uses $.getScript() which uses eval to execute the script which cannot modify the global scope in strict mode:

Second, eval of strict mode code does not introduce new variables into the surrounding scope. In normal code eval("var x;") introduces a variable x into the surrounding function or the global scope. This means that, in general, in a function containing a call to eval every name not referring to an argument or local variable must be mapped to a particular definition at runtime (because that eval might have introduced a new variable that would hide the outer variable). In strict mode eval creates variables only for the code being evaluated, so eval can't affect whether a name refers to an outer variable or some local variable:

Source: https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Functions_and_function_scope/Strict_mode

The solution is not using jQuery to load the script but appending a script element to the DOM. Note that you cannot even use jQuery to append the element; it will automatically use $.getScript() for it.

Mccue

You beat me by some seconds ;-) – Schach

Very interesting. I just came across this issue for the first time and it totally makes sense. My problem is that I need to execute several scripts in order after they are loaded, so I need to know when the script has loaded before adding the next script. Is there a way for me to know when a script has loaded if I use the method of appending the script to the DOM? would .load() work? – Displayed

Answer 2

jQuery evaluates the script. "use strict;" inside eval changes the semantics of the code. That's why strict mode can be dangerous! Because in browsers which don't support it, your code does something else.

Second, eval of strict mode code does not introduce new variables into the surrounding scope. In normal code eval("var x;") introduces a variable x into the surrounding function or the global scope. This means that, in general, in a function containing a call to eval every name not referring to an argument or local variable must be mapped to a particular definition at runtime (because that eval might have introduced a new variable that would hide the outer variable). In strict mode eval creates variables only for the code being evaluated, so eval can't affect whether a name refers to an outer variable or some local variable.

https://developer.mozilla.org/en/JavaScript/Strict_mode

The solution is to use window.foo = "bar;" instead of var foo = "bar";. And you should put your code inside a IIFE to make "use strict;" more predictable.

(function(window) {
    "use strict";

    window.globalVar = {};
    alert(typeof window.globalVar);
}(window));

Schach

It's not exactly what I needed, but it made me 'click' - thank you so much! :) – Muncey

Answer 3

Process the response removing the strict mode before execute:

 $.ajax({
    url: scriptUrl,
    dataType: "script",
    dataFilter: function (data, type) {
        return data.replace("\'use strict\';", "");
    }
});

Struma