By mxxk


2012-10-08 06:31:05 8 Comments

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.

3 comments

@rapomon 2016-11-02 09:01:32

Process the response removing the strict mode before execute:

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

@Prinzhorn 2012-10-08 06:43:45

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

@CunningFatalist 2014-09-11 12:32:37

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

@ThiefMaster 2012-10-08 06:43:42

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.

@Prinzhorn 2012-10-08 06:44:15

You beat me by some seconds ;-)

@Redtopia 2015-07-28 04:09:33

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?

Related Questions

Sponsored Content

18 Answered Questions

[SOLVED] Can't append <script> element

  • 2009-03-04 15:11:46
  • Dan Burzo
  • 299899 View
  • 276 Score
  • 18 Answer
  • Tags:   javascript jquery

11 Answered Questions

[SOLVED] Managing jQuery plugin dependency in webpack

4 Answered Questions

[SOLVED] Create an includes file jQuery

  • 2013-10-19 07:55:48
  • Notsogood13
  • 125 View
  • 2 Score
  • 4 Answer
  • Tags:   jquery

2 Answered Questions

[SOLVED] Global variables in JavaScript strict mode

1 Answered Questions

[SOLVED] jquery multiple deferreds in then

  • 2015-05-11 07:41:59
  • Johannes
  • 209 View
  • 6 Score
  • 1 Answer
  • Tags:   javascript jquery

1 Answered Questions

1 Answered Questions

css animation gets hanged while script load

3 Answered Questions

[SOLVED] Trying to dynamically load scripts in the page using getScript()

3 Answered Questions

Sponsored Content