¿Qué es mejor un bucle foreach o un for normal?

Es una pregunta interesante y la verdad es que no me lo había planteado. Siempre intento que el código sea suficientemente claro, cuanto más mejor, antes que preocuparme por términos de rendimiento, que no digo que no sea importante, pero en casi la totalidad de aplicaciones no es algo tan crítico.

Claro que dos algoritmos distintos pueden tener rendimiento diferente y hay que cuidar cómo los haces para conseguir eficiencia, pero en lo que respecta a usar uno u otro tipo de bucle poca cosa se te puede ir. Me refiero a eso exactamente.

Ahora, para probar tu caso y darte una respuesta exacta sobre qué tiene más rendimiento, he hecho un benchmark de varias alternativas de bucles, para recorridos a arrays.

Primero creo la estructura sobre la que vamos a iterar.

// Construyo un array de números aleatorios
var miarray = [];
for (var i = 0; i < 10; i++) {
  miarray[i] = Math.random();
}

Ahora, con esa misma estructura he probado los siguientes estilos de bucles:

Recorrido con un bucle for tradicional, el de toda la vida:

for(var i = 0; i < miarray.length; i++) {
  console.log(miarray[i]);
}

Recorrido mediante el método forEach de los arrays de Javascript:

miarray.forEach(function (item) {
  console.log(item);
});

Recorrido usando el bucle for...in

for (var i in miarray) {
  console.log(miarray[i]);
}

Por último, hacer el recorrido al array usando el bucle for...of, que quizás no sea tan conocido pero que también ayuda bastante si lo que quieres es tomar los valores y no los índices en cada iteración.

for (var i of miarray) {
  console.log(i);
}

Resultados del becnhmark

Los resultados que he obtenido me han sorprendido, la verdad. Porque la gracia es que el rendimiento de estos tipos de bucles puede depender del número de elementos del array por el que se va a iterar.

Con 1000 elementos en el array el bucle forEach consigue ser más rápido. Pero si son 10 elementos es el más lento de los 4. Podríamos decir que, si son pocos elementos, entonces el bucle for tradicional sale ganando, pero en el momento en el que tienes muchos elementos en el array, entonces el bucle forEach es el que más rendimiento ofrece. Pero Ojo, esos resultados de benchmark se refieren a Chrome, haciendo los test en Firefox los resultados cambian y suele ser mejor siempre el for tradicional.

Mi conclusión sigue siendo que importa poco, porque estos test hacen miles de veces el recorrido para que realmente haya una diferencia porcentual del 10% o cosas así en el rendimiento. No es representativo. Es más importante centrarse en la legibilidad del código.

Si queréis experimentarlo por vosotros mismos os dejo esta URL donde se encuentra preparado el benchmark y podéis ejecutar el proceso y hacer esos cambios en el array de números aleatorios e introducirle más elementos para ver cómo se comportan en relación a la cantidad de elementos en el array y en cada navegador.

https://jsben.ch/rey0z

Para un array como el de tu ejemplo es prácticamente inapreciable la diferencia, es decir, no creo que notes ninguna diferencia en términos de rendiminento.

Quizás en arrays de miles de posiciones, si tienes que recorrer todas las casillas, puedas encontrar alguna diferencia en algún milisegundo, si acaso. Sin embargo, el código del forEach es más fácil de leer y escribes menos, por lo que es también más fácil de mantener y por ese motivo yo lo preferiría.

Pero para contestar tu pregunta, tengo entendido que el for normal, de toda la vida, es el que mayor rendimiento te ofrece.

Las dos estrusturas de fondo hacen esactamente lo mismo, asi que es indistinguible usar cualquiera de las dos, no obstante lo mas efectivo seria usar foreach() debido a que mcuhas veces en desarrollo real se complica la manipulacion de elementos de recorrida del Array y en ese caso es mas facil tener el elemento a mano como Item y no como nombre_array[id]