¿Por qué la variable sombreada se evalúa como no definida cuando se define dentro del alcance?

Considere la siguiente pieza de código:

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

El resultado de este código es que el cuadro de alerta muestra el mensaje "fuera del alcance". Pero, si modifico ligeramente el código como:

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

el cuadro de alerta muestra el mensaje "indefinido". Podría haber entendido la lógica si se muestra" indefinido "en ambos casos. Pero eso no está sucediendo. Se muestra" indefinido "solo en el segundo caso. ¿Por qué ocurre esto?

¡Gracias de antemano por tu ayuda!

Respuestas a la pregunta(6)

Su respuesta a la pregunta