Почему теневая переменная оценивается как неопределенная, если она определена вне области видимости?

Рассмотрим следующий фрагмент кода:

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

Выходные данные для этого кода состоят в том, что в окне предупреждения отображается сообщение «вне области действия». Но если я немного изменю код как:

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

в окне предупреждения отображается сообщение «не определено". Я мог бы понять логику, если бы в обоих случаях он отображал" неопределенный ". Но этого не происходит. Он отображает" неопределенный "только во втором случае. Почему это так?"

Заранее спасибо за вашу помощь!