Hamburger Icon
Tipos de bucles for en JavaScript

Tipos de bucles for en JavaScript

En JavaScript tenemos muchas formas de iterar sobre objetos. Concretamente, con el bucle For hay varias.

Una de las cosas buenas o malas (según se mire) de JavaScript es que muchas veces, una misma tarea se puede llevar a cabo de diversas maneras.

Vamos a ver cómo podemos iterar de diferentes maneras los objetos que permiten recorrer sus elementos y propiedades.

El for de toda la vida

Es el que nos hace escribir más, pero también el que nos ofrece más flexibilidad. En otros lenguajes es bastante parecido y se usa del siguiente modo para iterar arrays:

https://a.storyblok.com/f/96536/1040x524/b029d8f640/bucles-for-01.png

El for...in para iterar objetos

Si queremos iterar a través de las propiedades de un objeto usaremos este tipo de bucle, teniendo en cuenta que no se puede asegurar cuál va a ser el orden de las propiedades iteradas:

https://a.storyblok.com/f/96536/1040x656/c304bf736c/bucles-for-02.png

El for...of para iterar arrays

Aunque también podemos usar el for...in para iterar arrays, el consejo es usar siempre el for...of o el for simple, ya que en caso contrario, a parte de los elementos del array, vamos a iterar otras propiedades que pueda tener, además de que el orden de iteración de sus elementos puede ser variable.

Por eso mismo usaremos el for...of para iterar los elementos de un array en el orden en el que están definidos:

https://a.storyblok.com/f/96536/1040x480/1a5c014370/bucles-for-03.png

Bucles for vs Array.map() o Array.forEach()

También podemos usar los métodos map() y forEach() de los arrays para iterar sus elementos. ¿Cuál es la diferencia con los bucles for?

Bien, pues son ligeramente diferentes. El método forEach() ejecuta la función que le pasemos como parámetro por cada elemento del array, mientras que map() lo que va a hacer es devolvernos otro array creado a partir de ejecutar la función que pasemos como parámetro a cada uno de los elementos.

El forEach() siempre devuelve undefined y no es encadenable, a diferencia de map(). Los bucles for...in y for...of, internamente usan un bucle forEach por lo que tienen las mismas características.

El bucle for de toda la vida es el más indicado en caso de que tengamos que iterar un array muy grande, ya que a nivel de rendimiento es el que mejor resultados nos va a dar.

Conclusiones

No te comas el coco. Usa los que te sean más fáciles de recordar y usar. A mí me parecen muy útiles los métodos map(), filter() y reduce(), la verdad es que son los que uso para la gran mayoría de iteraciones.

Lo único que has de tener en cuenta es que en el caso de arrays muy grandes, siempre tendrás mejor rendimiento con el bucle for, pero para casos "normales" no vas a notar ninguna diferencia en ese sentido.