requisitos - ¿Qué hay de malo en definir las variables de JavaScript dentro de if blocks?

pug variables

Question

Tengo un código como este:

if (condition) {
var variable = blah;
}

if (differentcondition) {
var variable = blah;
}

¿Es esto correcto?

Supongo que la variable no se asignaría si la condición no es verdadera.

JSLint sigue diciéndome, variable ya definida.

¿Estoy haciendo esto mal?

Gracias.

OK, aquí está mi uso real, estoy haciendo una delegación de eventos como esta:

$("#container").click(function (event){ 

    if ($(event.target).is(''img.class1'')) {
        var imagesrc = $(event.target).attr(''src'');
        // Do something with imagesrc
    }

    if ($(event.target).is(''img.class2'')) {
        var imagesrc = $(event.target).attr(''src'');
        // Do something with imagesrc
    }

    // This condition is mutually exclusive to the above 2
    if ($(event.target).is(''img.class3'')) {
        var imagesrc = $(event.target).attr(''src'');
        // Do something with imagesrc
    }

    // This condition is mutually exclusive to 1 and 2 but not to 3
    if ($(event.target).is(''img.class4'')) {
        var imagesrc = $(event.target).attr(''src'');
        // Do something with imagesrc
    }

});

En realidad, estas 2 clases no son mutuamente excluyentes.

Esto funciona para mí, pero ¿es correcto?

Las respuestas fueron muy informativas, pero todavía no entiendo cómo debo configurar las variables aquí.

En realidad, también quiero decir que ciertas condiciones son mutuamente excluyentes, y ciertas condiciones no lo son.

¿Cómo debería estructurar esto?

Probablemente debería haber usado este ejemplo desde el principio.

Answer 1

¿Son las dos condiciones if mutuamente excluyentes? Quizás quiera usar la estructura de control "else":

if (condition) {
    var variable = blah;
}
else if (differentcondition) {
    var variable = blah;
}

Esto significa que si la primera condición es verdadera, entonces la segunda parte del código nunca se ejecutará.

En general, es mejor declarar variables dentro de la estructura en la que se están utilizando. Si la variable solo debe existir dentro de la declaración if, declarar que está bien, de lo contrario, muévala al exterior de la siguiente manera:

var variable;
if (condition) {
    variable = blah;
}
else if (differentcondition) {
    variable = blah;
}
// continue to use variable here...

Nota: si usa ifs separados sin else, primero deberá establecer la variable a un valor predeterminado.

Answer 2

Porque javascript tiene algo llamado "Hoisting" que hace que tu código haga cosas que no parece que debería estar haciendo. Básicamente, eso significa que un intérprete de JavaScript moverá todas las declaraciones de var, independientemente de dónde se encuentren en el cuerpo de una función, a la parte superior del cuerpo de la función. Luego moverá todas las definiciones de funciones a la parte superior, justo debajo de todas las variables. Luego terminará de compilar la función.

Poner una var dentro de una sentencia if no va en contra de "las reglas" del lenguaje, pero significa que, debido a var hoisting, esa variable se definirá independientemente de si se cumple la condición de la declaración if.

Tenga en cuenta también que el izado no incluye la asignación, por lo que, como otros han señalado, las declaraciones de var se moverán a la parte superior y no se definirán hasta que se asignen más tarde.

Este es un ejemplo de una característica que debe haber parecido una buena idea en ese momento, pero ha resultado ser más confusa que útil.

Answer 3

Solo las funciones crean un alcance interno. Se pone aún más peludo como en este ejemplo.

var x = 2;
function foo() {
    alert(x); // will alert undefined?!?

    var x = 4;
}
foo();
alert(x); // will alert 2

La primera alerta realmente dirá indefinido. ¿Por qué? Debido a que todas las inicializaciones de variables que ocurren en la función se inicializan a indefinidas al inicio de la función . Por eso Crockford dice inicializar todas las variables lo antes posible.

Entonces su código probablemente debería verse así:

$("#container").click(function (event){ 
        var imagesrc;
        if ($(event.target).is(''img.class1'')) {
                imagesrc = $(event.target).attr(''src'');
                // Do something with imagesrc
        }

        if ($(event.target).is(''img.class2'')) {
                imagesrc = $(event.target).attr(''src'');
                // Do something with imagesrc
        }

        // This condition is mutually exclusive to the above 2
        if ($(event.target).is(''img.class3'')) {
                imagesrc = $(event.target).attr(''src'');
                // Do something with imagesrc
        }

        // This condition is mutually exclusive to 1 and 2 but not to 3
        if ($(event.target).is(''img.class4'')) {
                imagesrc = $(event.target).attr(''src'');
                // Do something with imagesrc
        }

});

Answer 4

¿Cómo debería estructurar esto?

En este caso, parece que sería mejor anidar las condiciones:

$("#container").click(function (event) {
    if ($(event.target).is(''img'')) {
        var imagesrc = $(event.target).attr(''src'');

        if ($(event.target).is(''.class1'')) {
            // Do something with imagesrc
        }

        if ($(event.target).is(''.class2'')) {
            // Do something with imagesrc
        }

        // This condition is mutually exclusive to the above 2
        if ($(event.target).is(''.class3'')) {
            // Do something with imagesrc
        }

        // This condition is mutually exclusive to 1 and 2 but not to 3
        if ($(event.target).is(''.class4'')) {
            // Do something with imagesrc
        }
    }
});

O mejor aún, use la delegación de eventos de jQuery:

$("#container").on("click", "img", function (event) {
    var imagesrc = $(this).attr(''src'');

    if ($(this).is(''.class1'')) {
        // Do something with imagesrc
    }

    if ($(this).is(''.class2'')) {
        // Do something with imagesrc
    }

    // This condition is mutually exclusive to the above 2
    if ($(this).is(''.class3'')) {
        // Do something with imagesrc
    }

    // This condition is mutually exclusive to 1 and 2 but not to 3
    if ($(this).is(''img.class4'')) {
        // Do something with imagesrc
    }
});

Answer 5

Esto se debe a que en JavaScript, las variables solo tienen un alcance diferente dentro de los bloques de funciones. A diferencia de otros lenguajes, los bloques if no tienen un alcance diferente en JavaScript.

En su caso, JSLint le diría que la variable ya está definida porque es posible que ambas condiciones sean verdaderas, en cuyo caso estaría sobrescribiendo sus variables.

Aquí hay un ejemplo de cómo funcionan los ámbitos en JavaScript:

function Something() {
    var thing1 = "hello";

    (function() {
        var thing2 = "world";
    })();

    // This line will throw a ReferenceError because "thing2" is not defined in this scope
    // It only exists within the scope of the function executed above
    alert(thing1 + thing2);
}

function SomethingElse() {
    var thing1 = "hello";

    if(true) {
        var thing2 = "world";
    }

    // This line will work because thing2 is not limited to the if-block
    alert(thing1 + thing2);
}