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.

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.