Using eval() to set global variables

Question

My code to set a global variable using eval is not working. It's as if the assignment is not called at all, but no script errors occur.

<script type="text/javascript">

    $(function() {

        setTimeout(function() {
            eval('var x = 1;');
            alert(x);
        }, 0);
    });
</script>

<div onclick="alert(x);">Click to see 'x'</div>

When the page loads, the alert shows what I expect; it confirms that x = 1. But after that, I click on the div and get a javascript error that x is undefined. How do I make eval add this variable properly?

Background: The code above is a minimally reproducing example from a project I'm working on where we must execute javascript code during AJAX responses. eval works properly most of the time, but this is causing problems.

Answer 1

You could use window.eval() to run eval() from global scope. This will assign var as a variable of window, which is what a global variable is: a variable attached to window.

... But you really really shouldn't. eval() is sandboxed for a reason.

That is not unless you really know what you are doing and trust everything you are receiving through XMLHttpRequest. It is one of those chicken/egg things: if you trust the code enough to execute it, it should be programmed well enough to prefix global variables with window. to begin with; thus, you should not need to use window.eval().

Besides, unless you are just trying to avoid async headaches by using the more-manageable XMLHttpRequest (there's a first time for everything...), you really should just create a script tag, assign it's source, and append it as a child to the head or body tag. Dynamically appending script tags is even faster than using XHR, especially for big scripts.