Javascript variable scope question
<p>Consider the following piece of code: </p>

<pre><code>&lt;html&gt;&lt;head&gt;&lt;/head&gt;
&lt;body&gt;
    &lt;script type="text/javascript"&gt;
        var outside_scope = "outside scope";
        function f1() {
            alert(outside_scope) ;
        }
        f1();
    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>The output for this code is that the alert box displays the message "outside
scope". But, if I slightly modify the code as: </p>

<pre><code>&lt;html&gt;&lt;head&gt;&lt;/head&gt;
&lt;body&gt;
    &lt;script type="text/javascript"&gt;
        var outside_scope = "outside scope";
        function f1() {
            alert(outside_scope) ;
            var outside_scope = "inside scope";
        }
        f1();
    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>the alert box displays the message "<em>undefined</em>". I could have
understood the logic if it displays "undefined" in both the cases. But, that
is not happening. It displays "undefined" only in the second case.  Why is this?</p>

<p>Thanks in advance for your help!</p>
