entre - for javascript

¿Es una mala práctica usar el mismo nombre de variable en múltiples for-loops?

Question

Estaba lanzando código JavaScript usando JSHint. En el código tengo dos for-loops ambos usados ​​así:

for (var i = 0; i < somevalue; i++) { ... }

Entonces ambos for-loops usan la var i para la iteración.

Ahora JSHint me muestra un error para el segundo for-loop: "''i'' ya está definido". No puedo decir que esto no sea cierto (porque obviamente lo es) pero siempre pensé que esto no importaría ya que la var i solo se usa en ese lugar específico.

¿Es una mala práctica usar for-loops de esta manera? ¿Debo usar una variable diferente para cada bucle for en mi código como

//for-loop 1
for (var i = 0; ...; i++) { ... }
//for-loop 2
for (var j = 0; ...; j++) { ... }

¿O se trata de uno de los errores que puedo ignorar (porque no rompe mi código, todavía hace lo que se supone que debe hacer)?

JSLint por cierto. deja de validar en el primer ciclo for porque no defino var i en la parte superior de la función (es por eso que cambié a JSHint en primer lugar). Entonces, de acuerdo con el ejemplo en esta pregunta: ¿Debería usar la validación JSLint o JSHint JavaScript? - De todos modos, debería usar for-loops como este para confirmar JSLint:

...
var i;
...
//for-loop 1
for (i = 0; ...; i++) { ... }
...
//for-loop 2
for (i = 0; ...; i++) { ... }

Esto también se ve bien para mí, porque de esta manera debería evitar ambos errores en JSLint y JSHint. Pero de lo que no estoy seguro es si debería usar una variable diferente para cada bucle for como este:

...
var i, j;
...
//for-loop 1
for (i = 0; ...; i++) { ... }
//for-loop 2
for (j = 0; ...; j++) { ... }

Entonces, ¿hay una mejor práctica para esto o podría ir con cualquiera de los códigos anteriores, lo que significa que elijo "mi" mejor práctica?

Answer 1

Dado que las declaraciones de variables se elevan a la parte superior del alcance en el que aparecen, el intérprete interpretará de manera efectiva ambas versiones de la misma manera. Por esa razón, JSHint y JSLint sugieren mover las declaraciones del inicializador de bucle.

El siguiente código ...

for (var i = 0; i < 10; i++) {}
for (var i = 5; i < 15; i++) {}

... se interpreta de manera efectiva como esto:

var i;
for (i = 0; i < 10; i++) {}
for (i = 5; i < 15; i++) {}

Tenga en cuenta que, en realidad, solo hay una declaración de i múltiples asignaciones: no se puede "redeclarar" una variable en el mismo ámbito.

Para responder tu pregunta ...

¿Existe una mejor práctica para esto o podría ir con cualquiera de los códigos anteriores?

Existen diferentes opiniones sobre la mejor manera de manejar esto. Personalmente, estoy de acuerdo con JSLint y creo que el código es más claro cuando declaras todas las variables juntas en la parte superior de cada ámbito. Dado que así es como se interpretará el código, ¿por qué no escribir código que se vea como se comporta?

Pero, como habrás observado, el código funcionará independientemente del enfoque adoptado, por lo que es una opción de estilo / convención, y puedes usar cualquier forma en la que te sientas más cómodo.

Answer 2

El motivo por el que JSHint muestra el error es porque en el ámbito de la variable JS está la función y las declaraciones de variables se elevan a la parte superior de la función.

En Firefox puede usar let palabra clave para definir el alcance del bloque, pero actualmente no es compatible con otros navegadores.

La palabra clave let está incluida en la especificación ECMAScript 6.

Answer 3

La mejor práctica es reducir el alcance de las variables, por lo que la mejor forma de declarar la variable de iteración para los bucles es

//for-loop 1
for (var i = 0; ...; i++) { ... }
//for-loop 2
for (var j = 0; ...; j++) { ... }

Sé el alcance de las variables declaradas con var pero estoy tomando aquí la legibilidad del código.

Answer 4

Las variables en javascript tienen un alcance de función (sin ámbito de bloque).

Cuando define var i en un bucle, permanece allí en bucle y también en la función que tiene ese bucle.

Vea abajo,

function myfun() {
//for-loop 1
for (var i = 0; ...; i++) { ... }
// i is already defined, its scope is visible outside of the loop1.
// so you should do something like this in second loop.
for (i = 0; ...; j++) { ... }
// But doing such will be inappropriate, as you will need to remember
// if `i` has been defined already or not. If not, the `i` would be global variable.
}

Answer 5

Sé que esta pregunta ha sido respondida, pero si quieres super for loops, escríbelas así:

var names = [''alex'',''john'',''paul'',''nemo''],
name = '''',
idx = 0,
len = names.length;
for(;idx<len;++idx)
{
name = names[idx];
// do processing...
}

Un par de cosas pasando aquí ...

1. La longitud de la matriz se almacena en len . Esto detiene JS evaluando names.length cada iteración

2. El incremento de idx es un PRE-INCREMENTO (ej. ++ idx NO idx ++). Los incrementos previos son nativamente más rápidos que los incrementos posteriores.

3. El almacenamiento de una referencia al name . Esto es opcional pero recomendado si usará mucho la variable de name . Cada llamada a names[idx] requiere encontrar el índice en la matriz. Si esta búsqueda es una búsqueda lineal, búsqueda de árbol o tabla hash, el hallazgo todavía está sucediendo. Así que guarde una referencia en otra variable para reducir las búsquedas.

Finalmente, esta es solo mi preferencia personal, y no tengo pruebas ni beneficios de rendimiento. Sin embargo, siempre me gusta inicializar las variables al tipo que van a ser, por ejemplo, name = '''', .

Answer 6

Se ha mencionado solo en el comentario de @TSCrowder : si su entorno lo admite (Firefox, Node.js), en ES6 puede usar let declaration

//for-loop 1
for (let i = 0; ...; i++) { ... }
//for-loop 2
for (let i = 0; ...; i++) { ... }

que limita el alcance dentro del for-loop . Bonificación: JSHint deja de quejarse.