Dlaczego zmienna funkcyjna jest niezdefiniowana, gdy po niej pojawia się var?

Przeczytałem, że dobrą praktyką jest umieszczenie instrukcji var, która definiuje wszystkie zmienne lokalne na górze każdej funkcji. Poniższy kod pokazuje, dlaczego jest to dobry pomysł, ponieważ najwyraźniej jest to varpo zmienna jest używana czyni ją niezdefiniowaną.

Ale czy ktoś może mi powiedziećczemu tak jest?

<html>
    <head>
        <script type="text/javascript">
            window.onload = function() {
                var a=1;
                function foo() {
                    //a = 2; //outputs 2,2 because this overwrites the external variable value
                    //var a = 2; //outputs 2,1 because the "var" keyword creates a second variable with local scope which doesn't affect the external variable 
                    console.log(a);
                    var a = 3; //ouputs "undefined,1" ???
                }
                foo();
                console.log(a);
            };
        </script>
    </head>
    <body>

    </body>
</html>

questionAnswers(1)

yourAnswerToTheQuestion