By Dan Abramov


2014-08-21 11:22:35 8 Comments

This code works alerts "ok" in all browsers except Chrome:

eval("var outer = 0; function test() {'use strict'; outer = 1; } test(); alert('ok');");

(Try it on jsfiddle).

All I'm doing is referencing an outer variable from a 'use strict' function, all in eval context. Chrome says

Uncaught ReferenceError: outer is not defined 

Note: I originally faced it when using devtool: 'eval' in Webpack.

2 comments

@Elena 2014-08-21 12:34:25

Actually eval creates variables or modifies variables in scope where it is defined, no matter if you use val or not. Or in other words, by default it doesn't have it's own scope.

So when you do this

eval("var outer = 0;");
console.log(outer); //0

you create variable in outer scope. Surprisingly, this works the same way in chrome too - and it doesn't matter if window.onload is used or not.

To make eval has it's own scope you must do the following:

eval("'use strict'; var outer = 0;"); 
console.log(outer); //Uncaught ReferenceError: outer is not defined 

Now there is a separate scope for eval. With 'use strict' in eval your code will work in chrome and won't allow to override variables outside eval.

eval("'use strict'; var outer = 0; function test() {'use strict'; outer = 1; } test(); alert('ok');");

So this part answers how can you avoid error.

The second part that I am very intersted in but couldn't find an answer by myself.

The question is following, why your code throws an error in chrome while this works in chrome(which means the global variable is created):

window.onload = function() {
   eval("var outer = 0; function test(){console.log(outer); } test();");
}

And also why it happens only with window.onload.

@ovi 2014-08-21 11:47:20

To simplify the problem : http://jsfiddle.net/rokkkjcs/6/

eval("var outer=0;");
function test() {'use strict'; outer = 1; } 
test(); 
alert('ok');

And the explanation is :

Non-strict code can use the ‘eval’ function to add new variables to the surrounding scope. Prior to native JSON support in browsers, ‘eval’ was commonly (and unsafely) used to construct objects from strings. The constructed objects then became a part of the surrounding scope. In strict mode, ‘eval’ cannot introduce new variables. When executed in strict mode, the following piece of code will not introduce the ‘bar’ variable into the surrounding scope. Note: if a function containing ‘eval’ is executed in strict mode, then the code inside the ‘eval’ function is also executed in strict mode.

More info : http://cjihrig.com/blog/javascripts-strict-mode-and-why-you-should-use-it/

@Dan Abramov 2014-08-21 15:47:49

I'm not quite sure I understand you here. Are you claiming your example is equivalent to mine? Can you explain why?

@ovi 2014-08-21 16:04:42

The only issue is adding a new variable to the surrounding scope with eval(). In strict mode, that variable will not be available. It works without a wrap because then it is in the global scope.

@Bergi 2014-08-24 12:24:40

But the eval is not executed in strict mode, is it?

Related Questions

Sponsored Content

27 Answered Questions

[SOLVED] What does "use strict" do in JavaScript, and what is the reasoning behind it?

32 Answered Questions

[SOLVED] Disable same origin policy in Chrome

42 Answered Questions

[SOLVED] Getting Chrome to accept self-signed localhost certificate

31 Answered Questions

26 Answered Questions

[SOLVED] Why is using the JavaScript eval function a bad idea?

40 Answered Questions

[SOLVED] Detecting an "invalid date" Date instance in JavaScript

  • 2009-08-30 11:34:40
  • orip
  • 765022 View
  • 1404 Score
  • 40 Answer
  • Tags:   javascript date

29 Answered Questions

[SOLVED] How do I get ASP.NET Web API to return JSON instead of XML using Chrome?

11 Answered Questions

[SOLVED] Managing jQuery plugin dependency in webpack

1 Answered Questions

[SOLVED] Indirect eval call in strict mode

Sponsored Content