¿Por qué la variable de función no está definida cuando var viene después?

He leído que una buena práctica es poner una instrucción var que defina todas las variables locales en la parte superior de cada función. El siguiente código muestra por qué es una buena idea, ya que aparentemente es una vardespués una variable que se usa la hace indefinida.

Pero alguien me puede decirpor qué ¿este es el caso?

<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>

Respuestas a la pregunta(1)

Su respuesta a la pregunta