Hoisting between different files

Question

Is there a way to do functions and variable hoisting between source code present in different files? That is, something like

//Inside firstfile.js
foo === "bar" //should return true

and

//Inside secondfile.js
function bar() {
    this.foo = "bar";
}

I guess this is not possible, as different files as parsed and executed separately and in order by most javascript engines, but I do not know for sure.

I don't know even if this is in the spec from ECMA, as the parsing of different files is not really part of the language.

Answer 1

I originally thought this was a more interesting question than it actually appears. The answer to the question I thought this was is that each <script> element represents a separate Program, each separate Program is parsed and (crucially) executed before anything happens to the next Program, therefore the effects of hoisting can only be seen within a single Program.

For example, within a single script:

<script type="text/javasscript">
    alert(typeof foo);
    function foo() {}
</script>

... alerts "function" because the function declaration is hoisted, but splitting the two lines into separate <script> elements changes this:

<script type="text/javasscript">
    alert(typeof foo);
</script>
<script type="text/javasscript">
    function foo() {}
</script>

... alerts "undefined", because the first script is executed before the second script is even parsed.

Answer 2

Separately-loaded Javascript sources can all affect the global context. Thus

window.foo = "bar";

in one source file will allow another source (loaded subsequently) to check:

if (window.foo === "bar") {
  // do something
}

This has to work, or else it would not be possible to create something like all the popular Javascript frameworks.

The "this" keyword is only meaningful inside a function, and its value has nothing to do with the source file from which the function came (at least, nothing in any direct sense).

edit — I guess that the interesting thing here is the Javascript interpreter behavior that (to use the term in the question) "hoists" function declarations up before other code in a block being evaluated. That also is done on a script-by-script basis when the browser is loading them. Thus, function declarations in a script block are interpreted before other code in each block, but a single <script> tag will be completely evaluated before the next <script> tag is loaded and evaluated.

Things get more complicated if you're using something like LabJS or enhance.js to load scripts, but I don't know of any context wherein you could rely on scripts "blending together" somehow unless you explicitly combine them at the server.

Answer 3

All script tags that browser encounters are parsed and executed immediately. This is because of document.write API, that might require to browser to output something to the DOM. This means that in this situation #script1's has to finish before #script2.

<script id="script1"></script>
<script id="script2"></script>

You might want to check what the behaviour when using ASYNC and DEFER attributes. They are supported in Webkit.