When does function order matter?
<p>I understand that JS does a pre-compilation of functions before it executes code.  So function order does not matter.  But, function order somehow becomes a problem when linking *.js files.</p>

<p>For example,</p>

<pre><code>&lt;script src="@Url.Content("~/Scripts/Personal/MyJScript.js")" type="text/javascript"&gt;&lt;/script&gt;


&lt;script type="text/javascript"&gt;
    $(document).ready(function () {
        hello();
        afterCall();
        hello2(); //fails, defined in MyJScript2.js

    });

    function afterCall() {
        alert('inline function defined after call');
    }
&lt;/script&gt;

&lt;script src="@Url.Content("~/Scripts/Personal/MyJScript2.js")" type="text/javascript"&gt;&lt;/script&gt;
</code></pre>

<p>In the code above, the function <code>hello2()</code> is defined in a file that is linked after the call is defined. The call fails.  So, intuitively I assume now function order <em>does</em> matter in this case.  </p>

<p>Considering I perform <code>$(document).ready</code>, the document should be as ready as it gets.  So, why does this happen?</p>

<p><hr />
As requested, here is the client side HTML</p>

<pre><code>&lt;body&gt;
    &lt;script src="/Scripts/Personal/MyJScript.js" type="text/javascript"&gt;&lt;/script&gt;


&lt;script type="text/javascript"&gt;
    $(document).ready(function () {
        hello();
        afterCall();
        hello2(); //fails

    });

    function afterCall() {
        alert('inline function defined after call');
    }
&lt;/script&gt;

&lt;script src="/Scripts/Personal/MyJScript2.js" type="text/javascript"&gt;&lt;/script&gt;

&lt;/body&gt;
</code></pre>
