javascript - infinito - Tratar con la advertencia de declaración duplicada para variables de bucle

for javascript array

Question

Considera el siguiente código:

for (var i=0; i<100; i++) {
    // your code here
}
// some other code here
for (var i=0; i<500; i++) {
    // custom code here
}

Cualquier herramienta de pelusa decente (jslint, jshint o built in IDE) dirá advertencia - duplicate declaration of variable i . Esto se puede resolver usando la variable con otro nombre ( k , j ) o moviendo la declaración a la parte superior:

var i; // iterator
for (i=0; i<100; i++) {}
for (i=0; i<500; i++) {}

No me gustan las dos variantes, normalmente no hago declaraciones en la parte superior (y aunque lo hiciera no quisiera ver allí las variables auxiliares, i , j , k ) y realmente no pasa nada malo en esos ejemplos para cambiar los nombres de las variables para.

Aunque sí quiero una gran advertencia en caso de que escriba algo como esto:

for (var i=0; i<100; i++) {
    for (var i=0; i<500; i++) {} // now that''s bad
}

¿Cuál es su enfoque para tales casos?

Answer 1

JavaScript tiene muchas construcciones que parecen construcciones conocidas en otros lenguajes de programación. Es peligroso para JavaScript interpretar la construcción de otra manera como la mayoría de los otros lenguajes de programación.

Si alguien que no conoce JavaScript lo suficientemente bien (el caso común por cierto) ve la construcción como

for (var i=0; i<100; i++) {
    // your code here
}

o ve la declaración de la variable en el bloque

{
    var i;
    //some code
    {
        var j;
        // some code
    }
}

entonces la mayoría de los lectores pensarán que se definirán las variables de nivel de bloque . JavaScript no tiene variables de nivel de bloque. Todas las variables se interpretarán como nivel de función definido.

Por lo tanto, nunca defino variables dentro del código si el código no es solo un código de prueba que se escribirá solo durante 5 minutos. La razón principal es que no quiero escribir código y usar construcciones de lenguaje que podrían malinterpretarse .

Por cierto, JSLint encuentra que definir las variables dentro del bloque es un estilo tan malo que detiene el procesamiento del análisis del código. No hay opciones de JSLint que puedan cambiar este comportamiento. Considero que el comportamiento de JSLint no es bueno, pero estoy de acuerdo en que la declaración de variables dentro del ciclo for es mala porque la mayoría de las personas lo leerá como código con variables de bucle local , lo cual es incorrecto.

Si utiliza

for (var i=0; i<100; i++) {
    // your code here
}
// some other code here
for (var i=0; i<500; i++) {
    // custom code here
}

entonces JavaScript mueve todas las declaraciones de variables al comienzo de la función por usted. Entonces el código será como

var i = undefined, i = undefined; // duplicate declaration which will be reduced
                                  // to one var i = undefined;

for (i=0; i<100; i++) {
    // your code here
}
// some other code here
for (i=0; i<500; i++) {
    // custom code here
}

Así que piense en otros lectores del código. No use construcciones que puedan interpretarse de manera incorrecta.

Answer 2

La mejor práctica aquí debería ser un buen estilo de programación:

Un programa debe ser construido en funciones cortas, que harán una pequeña tarea. Por lo general, si haces bucles, haces algo tan especial que debería representar una función propia. Al final, cada función tiene su propio alcance, de modo que el problema de declaración duplicada está ausente.

function myApp() {
    magicLoopAction();
    someOtherMagicStuff();
}
function magicLoopAction() {
    for (var i = 0; i < 42; i++) { 
        // whoopwhoop
    }
}
function someOtherMagicStuff() {
    for (var i = 0; i < 69; i++) { 
        // lint is happy and proud on you
    }
}

Answer 3

Recomiendo encerrar tus bucles dentro de las funciones autoejecutables cuyos nombres te dicen lo que está haciendo el bucle. Esto efectivamente le da alcance de bloque al bucle. Por ejemplo:

var users = response[''users'']
;(function appendUsers(){
    for (var i = 0; i < users.length; i++) {
        var user      = users[i]
        var userEmail = user[''email'']
        var userId    = user[''id'']
        /* etc */ 
    }
})() // appendUsers

Si haces esto:

var i
for (i = 0; i < someVar.length; i++) {
    for (i = 0; i < someOtherVar.length; i++) {
        // This is a bug that a validator will not notice.
    }
}

Por otra parte:

for (var i = 0; i < someVar.length; i++) {
    for (var i = 0; i < someOtherVar.length; i++) {
        // This is a bug that a validator will warn you about.
    }
}
for (var i = 0; i < yetAnotherVar.length; i++) {
    // It will also warn you about this, but so what?
}

Puedes dejar de usar i como un iterador:

for (var companyIndex = 0; companyIndex < companies.length; companyIndex++) {
    var company = companies[companyIndex]
}

Si está utilizando jQuery de todos modos, puede usar su método jQuery.each() :

$.each(someVar, function(i, value){
    // etc
})

No puede usar Array.prototype.forEach() si desea que IE8 y versiones anteriores funcionen, a menos que agregue el código Polyfill o similar.

Answer 4

Tiendo el uso de las funciones integradas del array, como map, filter y forEach, evitando así el problema por completo. Esto también le da automáticamente cuerpos de bucle de alcance que también es bastante útil.

Si el uso de estos no coincide con el caso de uso, suelo recurrir a la declaración superior, simplemente para evitar los problemas que mencionaste.

Answer 5

let palabra clave se introduce en JavaScript 1.7. Encuentre la documentación de MDN here

Reemplazar var para let dentro for loop soluciona el problema y ahora uno puede declarar la variable local dentro del alcance de un ciclo. Consulte la explicación de la comunidad de stackoverlow aquí: ¿Cuál es la diferencia entre usar "let" y "var" para declarar una variable?

Código del futuro:

for (let i = 0; i < someVar.length; i++) {
    // do your thing here
}