Javascript - foreach y todo sobre los bucles js 馃

脷ltima actualizaci贸n:

驴Qu茅 es un loop en Javascript? Conceptos generales

Antes de empezar me gustar铆a explicar qu茅 son los loops en javascript, bueno realmente que son los bucles en general ya que son aplicables a todos los lenguajes de programaci贸n.

Un loop es una serie de instrucciones que se utilizan para repetir una parte del c贸digo. Un bucle tamb铆en se puede utilizar para recorrer listas, arrays, objetos, etc.

Si por ejemplo queremos mostrar por pantalla un mensaje 10 veces, en lugar de pegar y copiar la instrucci贸n 10 veces, podemos crear un bucle. Generalmente todos los lenguajes de programaci贸n tienen entre su sintaxis, la creaci贸n de bucles for y bucles while

C贸mo crear un bucle for

Un bucle for se compone de una instrucci贸n en la cual una variable contador se define y se incrementa hasta el l铆mite tope que hayamos puesto.

Veamos un ejemplo r谩pido:

for(let i=0; i<10; i++){
    console.log('Iteracci贸n: ' + i);
}

En este caso, la variable i ser谩 el contador del bucle e ir谩 incrementando en cada iteracci贸n. Cuando se cumpla la condici贸n (i<10), el bucle terminar谩

Adem谩s tambien puedes hacer que el bucle vaya a la inversa para que decremente el contador en lugar de incrementarlo:

for(let i=10; i<0; i--){
    console.log('Iteracci贸n: ' + i);
}

Incluso puedes incrementar el contador los pasos que quieras en cada iteracci贸n, en el ejemplo de abajo se incrementa en 2 en cada iteracci贸n:

for(let i=10; i<0; i += 2){
    console.log('Iteracci贸n: ' + i);
}

C贸mo crear un bucle while

Un bucle while se trata de una manera de hacer que el c贸digo se repita hasta que se cumpla determinada condici贸n. La diferencia con el bucle for es que no necesitas declarar un contador, solo necesita de una condici贸n.

Lo que haya dentro del while se ejecutar谩 mientras la condici贸n se cumpla.

Un bucle while se puede usar como un bucle for si hacemos que la condici贸n de salida del bucle sea cuando sobrepasamos el contador, aunque tendremos que incrementar manualmente la condici贸n.

let i = 0
while(i<10){
    console.log('Iteracci贸n: ' + i);
    i++;
}

Bucle while en js

Si estas familiarizado con la sintaxis de Javascript seguramente ya conoc铆as de sobra estos bucles pero no est谩 de m谩s recordarlo por si hay alguien que lo desconoce.

La instrucci贸n break en los bucles

Para ambos bucles, existen dos instrucciones que pueden resultar bastante 煤tiles en algunas situaciones.

La instrucci贸n break sirve para salir del bucle for si se cumple una condici贸n.

Hasta ahora, si quer铆as salir del bucle ten铆as que poner un if justo al empezar el bucle para comprobar si podemos seguir en el bucle:

for (i = 0; i < 10; i++) { 
    if (i<5) {   
        connsole.log("Contador: " + i);
    }
}

Lo malo de esto es que aunque no se pinte el contador, la variable se sigue incrementando. Si por ejemplo tenemos un bucle que se va a ejecutar 1000 veces, si nos salimos en la segunda ejecuci贸n, el bucle seguir谩 ejecut谩ndose aunque no se muestre nada.

Aqu铆 es donde entra en juego la instrucci贸n break en javascript y en general en muchos lenguajes, para optimizar los bucles y que no se ejecuten de m谩s.

Si pones un if dentro del bucle como antes y dentro la instrucci贸n break, en cuanto se ejecute, saldr谩 del bucle y no se ejecutar谩 m谩s pase lo que pase. Por ejemplo:

for (i = 0; i < 1000; i++) {
    if (i === 3) { break; }
    connsole.log("Contador: " + i);
}

La instrucci贸n break en javascript

En este ejemplo, en cuanto el contador valga 3, saldr谩 del bucle y no ejecutar谩 las 996 interacciones posteriores.

La instrucci贸n continue

La instrucci贸n continue, sirve para saltarse instrucciones espec铆ficas, es decir, si llega a esta instrucci贸n el bucle se saltar谩 lo que ponga a continuaci贸n y pasar谩 a la siguiente instrucci贸n del bucle.

Un ejemplo de la instrucci贸n continue ser铆a:

for (i = 0; i < 10; i++) {
    if (i === 3) { continue; }
    connsole.log("Contador: " + i);
}

La instrucci贸n continue en javascript

Si ejecutas el c贸digo anterior en la consola del navegador y miras el resultado, podr谩s observar que no pinta el contador cuando vale 3.

La instrucci贸n break junto con la instrucci贸n continue se pueden usar junto a una etiqueta para referenciar el bloque al que se aplica, por ejemplo:

var fruits = ["Apple", "Banana", "Cherries"];
list: {
    text += fruits[0] + "<br>"; 
    text += fruits[1] + "<br>"; 
    break list;
    text += fruits[2] + "<br>"; 
    text += fruits[3] + "<br>"; 
}

C贸mo usar el bucle foreach en javascript

El bucle foreach en js, y en general en muchos lenguajes, es un bucle que simplemente recorre los objetos de un array. Esto tambi茅n se puede hacer con un bucle for normal:

for (i = 0; i < array.length; i++) {
    connsole.log(array[i]);
}

Antes de la llegada de ES6 en Javascript, la forma de hacer un bucle foreach es la siguiente:

for (var x in array) {
    console.log(x);
}

Como ves simplifica mucho el bucle, pero tiene sus desventajas.

Pongamos este ejemplo:

var a = [];
a[5] = 3;
for (var x in a) {
    console.log(x);
}

Lo que todo el mundo esperar铆a es que el array va a pintar 5 veces undefined y una vez el n煤mero 3, que corresponde con el valor que hay en el array en la 5潞 posici贸n, pero esto no es as铆.

Lo que se va a mostrar en la consola es una vez el n煤mero 3 y nada m谩s. Esto es debido a que lo que hace es pintar 煤nicamente los valores del array que tengan un valor.

Otro de los problemas de usar for each es que no est谩 garantizado el orden num茅rico a la hora de recorrer el array, sobre todo en versiones m谩s antiguas de los navegadores.

EL 煤ltimo de los problemas de este bucle es que primero se recorre todas las propiedades del array para sacar sus propiedades, por lo que el bucle ser谩 m谩s lento que un bucle for normal, sobre todo si tiene muchos elementos.

for in vs for of en javascript

Hay otro tipo de bucle que funciona muy parecido al bucle for in visto anteriormente, el bucle for of.

La sintaxis es exactamente la misma, la diferencia con el anterior es que el bucle for of recorre los objetos que son iterables, un array por ejemplo. En cambio el bucle for in est谩 pensado para iterar sobre las propiedades de los objectos.

Si lo aplicamos sobre un objecto devolvera las claves (las keys, el nombre de sus propiedades pero no su valor).

Como hemos visto antes, se puede usar tambi茅n for in para recorrer un array, pero no es recomendable.

Ejemplo de bucle for in:

var oldCar = {
    make: 'Audi',
    model: 'A4',
    year: '2010'
};

for (let key in oldCar) {
    console.log(key + ' - ' + myCar[key]);
}

Si hacemos este mismo bucle pero con un for of se mostrar谩 por pantalla:

make
model
year

Ejemplo de bucle for of:

let animals = ['sheep', 'pig', 'rabbit'];

for (let animal of animals) {
    console.log(animal);
}

El bucle for of solventa los problemas que hemos visto con los bucles for in si se usa sobre arrays, es decir, listas simples y no listas de objetos.

Bucle foreach en ES6

Cuando sacaron ES6 incluyeron una nueva forma de recorrer los elementos de un array, el bucle foreach propiamente dicho:

myArray.forEach(function (value) {
  console.log(value);
});

Pero este bucle tambi茅n a帽adi贸 nuevos inconvenientes.

Con este bucle no puedes hacer break ni continue. Adem谩s utilizar return dentro del bucle no evitar谩 que se siga recorriendo hasta el final (en java por ejemplo no es as铆).

Este bucle se suele usar en favor del bucle for cuando necesitamos encapsular c贸digo ya que pasamos una funci贸n como par谩metro al bucle foreach. Esta funci贸n se puede sustituir por una arrow function:

myArray.forEach((value) => {
  console.log(value);
});

La ventaja de este tipo de bucles es que el c贸digo es mucho m谩s mantenible ya que no tienes que declarar contadores todo el rato, sobre todo si es para recorrer arrays y listas.

Por cierto, si quieres usar un contador dentro del foreach lo puedes hacer as铆:

myArray.forEach((value, i) => {
  console.log(value);
});

La variable i se incrementar谩 autom谩ticamente en cada iteracci贸n del bucle.

Otra de las ventajas del bucle foreach es que se puede usar de forma concatenada tras aplicar funciones map, filter, reduce, etc.

Te dejo una imagen con una comparaci贸n de rendimiento de cada uno de los bucles:

Bucle foreach en Typescript

El bucle foreach en Typescript se escribe ex谩ctamente igual que en javascript puro, su sintaxis es la misma.

myArray.forEach((value) => {
  console.log(value);
});

Conclusiones

Si ya has usado Javascript con anterioridad seguramente que ya conoc铆as los bucles que he descrito, pero yo al menos, no sab铆a bien cuando usar uno o otro y cu谩les son las desventajas o los problemas de usar este tipo de bucles en javascript.