validar - Sorprendido de que la variable global tiene un valor indefinido en JavaScript

validar undefined jquery

Question

Hoy, me sorprendí por completo cuando vi que una variable global tiene undefined valor undefined en ciertos casos.

Ejemplo:

var value = 10;
function test() {
    //A
    console.log(value);
    var value = 20;

    //B
    console.log(value);
}
test();

Da salida como

undefined
20

Aquí, ¿por qué el motor de JavaScript está considerando el valor global como undefined ? Sé que JavaScript es un lenguaje interpretado. ¿Cómo es posible considerar variables en la función?

¿Es eso una trampa del motor de JavaScript?

Answer 1

Este fenómeno se conoce como: elevación de variables JavaScript .

En ningún momento accedes a la variable global en tu función; solo estás accediendo a la variable de value local.

Tu código es equivalente a lo siguiente:

var value = 10;

function test() {
    var value;
    console.log(value);

    value = 20;
    console.log(value);
}

test();

¿Todavía estás sorprendido de que te vuelvas undefined ?

Explicación:

Esto es algo en lo que cada programador de JavaScript se topa tarde o temprano. En pocas palabras, cualquiera que sea la variable que declare, siempre se izará al principio de su cierre local. Por lo tanto, aunque haya declarado su variable después de la primera llamada a console.log , todavía se considera como si la hubiera declarado antes.
Sin embargo, solo se está izando la parte de declaración; la asignación, por otro lado, no lo es.

Por lo tanto, cuando llamó por primera vez a console.log(value) , estaba haciendo referencia a su variable declarada localmente, que todavía no tiene asignada nada; por lo tanto undefined .

Aquí hay otro ejemplo :

var test = ''start'';

function end() {
    test = ''end'';
    var test = ''local'';
}

end();
alert(test);

¿Qué crees que esto alertará? No, no sigas leyendo, piensa en ello. ¿Cuál es el valor de la test ?

Si dijiste algo más que start , te equivocaste. El código anterior es equivalente a esto:

var test = ''start'';

function end() {
    var test;
    test = ''end'';
    test = ''local'';
}

end();
alert(test);

para que la variable global nunca se vea afectada.

Como puede ver, no importa dónde coloque su declaración de variable, siempre se iza al principio de su cierre local.

Nota al margen:

Esto también se aplica a las funciones.

Considera este pedazo de código :

test("Won''t work!");

test = function(text) { alert(text); }

que le dará un error de referencia:

Unloading ReferenceError: la prueba no está definida

Esto arroja a muchos desarrolladores, ya que esta pieza de código funciona bien:

test("Works!");

function test(text) { alert(text); }

La razón de esto, como se dijo, es porque la parte de la asignación no se iza. Por lo tanto, en el primer ejemplo, cuando se ejecutó la test("Won''t work!") , La variable de test ya se ha declarado, pero aún no se le ha asignado la función.

En el segundo ejemplo, no estamos usando asignación de variable. Por el contrario, estamos utilizando la sintaxis de declaración de función adecuada, que sí consigue la función completamente izada.

Ben Cherry ha escrito un excelente artículo sobre esto, apropiadamente titulado JavaScript Scoping and Hoisting .
Léelo. Te dará una imagen completa con todo detalle.

Answer 2

Hay un value variable global, pero cuando el control ingresa a la función de test , se declara otra variable de value , que sombrea la variable global. Dado que las declaraciones de variables ( pero no las asignaciones ) en JavaScript se elevan a la parte superior del ámbito en el que se declaran:

//value == undefined (global)
var value = 10;
//value == 10 (global)

function test() {
    //value == undefined (local)
    var value = 20;
    //value == 20 (local)
}
//value == 10 (global)

Tenga en cuenta que lo mismo es cierto para las declaraciones de funciones, lo que significa que puede llamar a una función antes de que parezca estar definida en su código:

test(); //Call the function before it appears in the source
function test() {
    //Do stuff
}

También vale la pena señalar que cuando se combinan los dos en una expresión de función, la variable estará undefined hasta que se realice la asignación, por lo que no puede llamar a la función hasta que eso suceda:

var test = function() {
    //Do stuff
};
test(); //Have to call the function after the assignment

Answer 3

Las variables en JavaScript siempre tienen un alcance para toda la función. Incluso si se definieron en el medio de la función, son visibles antes. Fenómenos similares pueden observarse con el levantamiento de funciones.

Dicho esto, el primer console.log(value) ve la variable de value (la interna que sombrea el value externo), pero aún no se ha inicializado. Puede pensar que todas las declaraciones de variables se movieron implícitamente al principio de la función ( no el bloque de código más interno), mientras que las definiciones se dejan en el mismo lugar.

Ver también

• Alcance y elevación de funciones de Javascript
• Declaraciones de variables Javascript a la cabeza de una función

Answer 4

Me decepcionó un poco que se explicara el problema aquí, pero nadie propuso una solución. Si desea acceder a una variable global en el alcance de la función sin la función que hace primero una var local indefinida, window.varName la var como window.varName