Por que a variável de função é indefinida quando var vem depois dela?

Eu li que uma boa prática é colocar uma instrução var que define todas as variáveis ​​locais no topo de cada função. O código a seguir mostra porque isso é uma boa idéia, já que aparentemente um vardepois de uma variável é usada faz com que seja indefinido.

Mas alguém pode me dizerporque este é o 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>

questionAnswers(1)

yourAnswerToTheQuestion