Operación confusa de la palabra clave `var` de JavaScript

Question

Me he encontrado con un problema muy extraño (para mí) con la palabra clave var. Lo reduje a un caso de prueba bastante mínimo, y encontré que se exhibió en Node.js (por lo tanto, V8 y Chrome), el inspector de Safari 4 (por lo tanto, Nitro) y FireBug (obviamente, SpiderMonkey). Originalmente estaba preparando un informe de fallas, pero dado que se muestra de manera tan amplia, supongo que no entiendo completamente cómo se supone que JavaScript debe abarcar y buscar variables.

El caso de prueba es muy pequeño, y en GitHub aquí: http://gist.github.com/260067. La única diferencia entre el primer y el segundo ejemplo es la inclusión de la palabra clave var.

Aquí, también, es un caso de prueba similar que presenta el mismo 'problema' de una manera diferente: https://gist.github.com/698b977ee0de2f0ee54a

Editar: necesidad, para evitar más respuestas que intentan explicar cómo funciona el alcance en cascada, I' Estoy íntimamente familiarizado con eso. Mi problema, es que no entiendo por qué el siguiente código 'funciona' (en el que alert() s 'exterior', seguido de 'interior', y luego otra vez 'exterior'):

(function(){ 
    var foo = 'outer'; 
    alert("Outer `foo`: " + foo); 

    (function(){ 
    foo = 'inner'; 
    alert("Inner `foo`: " + foo); 

    var foo; 
    })(); 

    alert("Outer `foo`: " + foo); 
})(); 

El var foo; ocurre en una posición completamente irrelevante para la reasignación de foo; Entonces, ¿por qué afecta esa tarea de una manera muy sustancial?

Answer 1

El problema es que, a diferencia de otros idiomas, JavaScript crea todas las variables al inicio de una función. Esto significa que el código:

(function(){ 
    if(myVar == undefined){ 
     alert(myVar); 
    } 
    if(myVar == undefined){ 
     var myVar = 5; 
    } 
})(); 

es en realidad compilado e interpretado como

(function(){ 
    var myVar; 
    if(myVar == undefined){ 
     alert(myVar); 
    } 
    if(myVar == undefined){ 
     myVar = 5; 
    } 
})(); 

Para crear una variable y sólo tenerlo disponible dentro de un si o un lazo bloque, usted tiene que utilizar let, la cual es una nueva característica de JavaScript. No estoy seguro de cuántos navegadores lo implementan todavía (Firefox 3.5 lo hace si usa <script type="text/javascript;version=1.7">).

(function(){ 
    if(myVar == undefined){ 
     alert(myVar); 
    } 
    if(myVar == undefined){ 
     let myVar = 5; 
    } 
})(); 

Answer 2

la inclusión de var significa que la asignación de {} se realiza a las exportaciones de una variable local en lugar de a las exportaciones de variables globales, lo que significa que no tiene ningún efecto.

Answer 3

var exports no funciona exactamente como las variables locales en muchos idiomas. Declara exports como variable local en toda la función en lugar de solo el bloque adjunto (aunque aparezca después del primer uso), por lo que el argumento de la función con el mismo nombre está oculto.

Editar: la palabra clave let funciona de manera más convencional (declara una variable solo para el bloque contenedor) pero no está disponible en todas las versiones de JavaScript.