Loops JS - toviddfrei/javascript GitHub Wiki
¿Qué tipo de bucles hay en JS?
Hola, seguimos y resistimos y volvemos a seguir, persistimos, sin desistir. Tal cual funciona un bucle, sigue, sigue, sigue, y vuelve a seguir hasta finalizar su trabajo, piensa poco la verdad, pero se vuelve a ejecutar sin protestar, claro está que sepamos de los que hablamos, le digamos lo que tiene que hacer y hasta donde tiene que hacerlo, por eso lo de que piensa poco.
Bueno después de esta pequeña presentación, aunque nos vemos con imagen nueva, este artículo lo vamos a preparar en otro medio de comunicación, nos pasamos a la wiki de GitHub, la verdad que las primeras impresiones son espectaculares, vamos a disfrutar mucho me da en la nariz. Vale, no me enrollo más, pero quiero advertir a todos que cambiamos de campo, no de jugadores, podemos cambiar de imagen de tecnología, pero la base de este trabajo es el mismo, presentar una imagen personal de este lenguaje, JavaScript. En este caso vamos a hablar de Loops o Bucles. Pieza fundamental de cualquier lenguaje de programación.
Nos ponemos un poco en situación y como siempre, por eso digo que no cambiamos de jugadores, busco el concepto que me pregunta, que debo conocer, el que debo interiorizar y por supuesto si este concepto me lleva a otro, a por él también.
Los bucles en definitiva, son mecanismos de repetición, valoremos cualquier artículo de nuestra vida cotidiana, un tenedor por ejemplo, el tenedor que tenemos para batir los huevos, lo ponemos en vertical, le ponemos un motor para que repita automáticamente algo que nosotros podíamos hacer manualmente, y lo convertimos en una máquina, una batidora. Repetir una acción lo convierte en una máquina, yo diría que sí, esta máquina es fundamental que esté en cualquier lenguaje, si ella habría acciones que no serían posibles, si podemos abrir uno, dos, tres, cuatro, cinco, ... Archivos, y buscar en su interior, pero y si tenemos 35.656.842 archivos a abrir y revisar, ¿toda una vida?, si no tuviéramos los bucles, nuestra vida sería claramente peor.
Espero que haya quedado clara la idea, nuestros loops, sean del tipo que sean, su objetivo es repetirse, y nosotros aprovechamos este funcionamiento para realizar tareas, claro está, repetitivas. Sin más comencemos con los tipos de bucle que existen en JavaScript, hay que tener en cuenta que dentro del funcionamiento general siempre hay particularidades, y por supuesto cada lenguaje aprovecha sus loops de forma distinta, en el caso de JavaScript, tenemos una amplia variedad de estas piezas, estos motores que siempre están a punto para repetir. Un ejemplo muy visual.
for( i=0 ; i<3 ; i++ ) {
console.log( 'Hola, soy tú loop' );
}
// Hola, soy tú loop
// Hola, soy tú loop
// Hola, soy tú loop
Rápidamente, for es un loop básico desde hace muchos años, lo hemos declarado, dándole un contador i es igual a 0, le hemos dado una condición a cumplir, ser menor al número 3, y le hemos dado vida, en cada iteración del bucle o loop, sumamos 1 a i.
Leemos toda la frase completa, i es igual a 0, mientras i no sea mayor a 3, cada iteración sumas 1 y en cada iteración entramos en el bloque de código y realiza lo que le hemos expresado, una salida por consola, unas operaciones, un trabajo específico sobre un string, lo que le pidamos.
Anteriormente, comente, no piensan mucho los bucles, no para nada, su faena es realizar iteraciones, toda la lógica de esa iteración recae sobre el desarrollador, y es en eso en lo que vamos a trabajar, los distintos tipos de bucles se deben a situaciones particulares de mejor uso, reducción de la sintaxis, adaptación del loop al entorno donde opera, según sean nuestras necesidades podemos utilizar un motor u otro.
El trabajar con loop implica que tengamos algo claro mentalmente de que queremos hacer con nuestro bucle, qué objetivo tiene, que es lo que esperamos, o al revés que es lo que no esperamos. Si esto está algo nítido en nuestra cabeza, podemos darle forma a la expresión inicial. En el ejemplo yo tenía claro que solo quería tener tres repeticiones, por lo tanto, tenía que limitar las iteraciones desde 0 hasta 3, como hacerlo, pues tal como veis, inicializando una variable i en 0 y condicionando esa variable a que no supere el número tres, ya tengo mis tres repeticiones.
Por eso de tener un objetivo medianamente claro. Tengo que recalcar esta situación, ya que un bucle igual que tiene su gran utilidad, tiene un gran peligro, los bucles infinitos son un error de desarrollo directamente nuestro, si fallas en un bucle y no se ejecuta correctamente, incluso puedes llegar a bloquear una computadora, y la responsabilidad sería totalmente tuya, por eso insistir en que no piensan, incluso te diría que for es el amigo inteligente de otro tipo como es while que lo veremos a continuación que ese sí que lo tienes que parar o parar, ese sí que no tiene límites. Sin querer asustar a nadie, solo advertir que los bucles mal confeccionados son un gran peligro, ahora los bucles bien estructurados y confeccionados son incluso bonitos de ver.
Hagamos una similitud de nuestra vida diaria, si a un motor lo pasas de vueltas lo puede gripa, ¿no?, pues engrasemos bien esos motores.
Bucles for, for...in, for...of, forEach()
La familia de bucles for, desde hace mucho tiempo for proporciona la funcionalidad de repetir, automatizar tareas en programación ya no solo en JavaScript, lo puedes encontrar en más lenguajes, su uso es parecido, claro esta diferentes sintaxis, pero su funcionamiento es siempre igual, es un motor de repetición, una ametralladora de código, lo cargas y repite, repite, de verdad, no te aburrirás con ellos.
Loops for
Como hemos empezado con ellos y son los más utilizados, vamos a discutir sobre las variedades que tiene for, la traducción sería "para", algo así como, "para", cuando la condición deje de cumplirse. Este tipo de bucles funciona de esa manera, como vemos en el ejemplo anterior, la condición era no ser mayor de 3, una vez cumplida esa condición el bucle o loop, se detiene y sale automáticamente a la siguiente línea de código.
Esto es así porque es un bucle muy honesto, realizara iteraciones siempre que el resultado de la condición sea verdadero, si es resultado es verdadero entra en el bloque de código y realiza lo que le hayamos expresado, en cuanto la condición resulta falsa, sale a la línea siguiente al bucle.
Por lo tanto, volvamos un poco al comienzo. Vemos la sintaxis, palabra clave for seguida de paréntesis, seguida de llaves, cierre de la expresión del loop. Dentro de los paréntesis tenemos nuestro panel de control, dentro de las llaves tenemos nuestro equipamiento, otros bucles, otras condicionales, otras variables, no sé, cada uno monta el coche que le interesa en cada momento.
Estudiemos un poco más el panel de control, la expresión inicial, la expresión condicional y la expresión de actualización.
Cuando tras poner el primer paréntesis de apertura nos enfrentamos a la expresión inicial, entonces teniendo clara la expresión inicial, me haría una pregunta, ¿es necesaria, o es opcional, funcionaria un bucle sin expresión inicial, o lo sustituye por algún valor preestablecido?, veámoslo.
let i = 0;
for( ; i<3 ; i++ ) {
console.log( 'Hola, soy tú loop' );
}
Como vemos, la expresión no es necesaria, reservamos su espacio, ya que for tiene que identificar cuál es la expresión inicial, la condicional y la actualización, pero no es necesario expresar ningún inicio, también a su vez nos permite una expresión de cualquier grado de complejidad, incluso declarar nuevas variables tal como veis en el primer ejemplo.
Vale, creo que la llave de contacto la tenemos puesta, ahora vamos con el modo de conducción, la condicional. Ponemos un ejemplo, vale, que mola oír rugir esos motores.
/*
for( ; ; ) {
console.log( 'Hola, soy tú loop' );
};
*/
De momento los apago, si queréis ver un bucle infinito hay esta, tal como hemos hablado la expresión inicial no sería necesaria, si des comentara el bucle del ejemplo veríamos que la expresión de la condicional tampoco lo es, ya que for, si detecta que no hay condicional devuelve siempre verdadero, y como veis la expresión de actualización no es necesaria tampoco, lo cual nos deja que esa estructura que veis ahí, si la des comentara y la ejecutara empezaría a iterar una y otra vez de forma infinita mostrándonos en la consola el mensaje y solo deteniéndose cuando los recursos de la computadora se agotan, la memoria se puede colapsar, ya que el bucle sigue consumiendo memoria sin detenerse, reitero ya que for ante la situación de que no hay expresión condicional que resolver siempre retorna verdadero.
Teniendo claro que tenemos un panel de control con tres controladores, tenemos que utilizarlos y dirigir el funcionamiento del motor elegido. Adecuar el inicio según necesitemos, la expresión inicial en si nos otorga una decisión que tipo de bucle elegir.
Y aquí es donde podemos comenzar a responder la pregunta. ¿Qué tipo de bucle elegir?, por supuesto, respondiendo la que nos ha traído hasta aquí, antes. ¿Qué tipos de bucles existen?, bueno, son dos preguntas fundamentales. Para elegir debemos saber su utilidad, ¿no?, vale, pues consideremos que los bucles for, son utilices en todas las situaciones que necesites un loop, pero tienen la peculiaridad de no acceder al cuerpo del bucle(las expresiones situadas entre las llaves), si la expresión condicional es falsa, haya o no haya realizado alguna interacción, pongamos un ejemplo gráfico.
let branch = 'Ferrari';
for( ; branch === 'Ford' ; ) {
console.log( 'Hola, soy tú Ford' );
break;
}
for( ; branch === 'Ferrari' ; ) {
console.log( 'Hola, soy tú Ferrari' );
break;
}
Vemos el retorno, me ha traído mi Ferrari, jejej. Fuera de bromas, el for de Ford, jejeje, va que sí, ha llegado al primer for ha evaluado, el retorno false, ha hecho terminar el for y salir a la siguiente línea, donde ha encontrado otro for que su retorno si ha sido verdadero, ha entrado en el bloque de código y lo ha ejecutado.
Podemos notar que estoy utilizando la palabra reservada break, después de sufrir varios bucles infinitos, siempre, siempre cuando realizo pruebas cierro el bucle, que es lo que hace break, tal como se traduce, rompe el bucle o loop y sale inmediatamente a la siguiente línea evitando que se produzcan bucles infinitos, que si revisamos los ejemplos anteriores lo son, no delimitamos el inicio, ni el fin del bucle, y en cuanto el for detecta la expresión condicional verdadera se lanza como un loco a repetirse. Insisto, cuidado con esto, break, en este caso si es una buena muletilla en todos los ejemplos y laboratorios que tengamos, una vez te cerciores que el loop está bien configurado, si sobra se borra, y digo si sobra, veremos en breve que algunas veces podemos buscar esa situación.
Creo que como parte básica tenemos lo que queremos, sabemos para qué sirve un bucle, hemos visto el funcionamiento, su utilidad y hemos visto el peligro de no controlarlos, hemos visto algo de sintaxis. Pero diría que podemos avanzar en nuestro recorrido.
Quisiera dejar un caso base con for y trasladarlo a todos los demás tipos que vamos a ver, creo que comparando como lo expresamos y la utilidad que tiene podemos ir introduciéndolo en la cabeza. Pues contemos una historia si te parece.
// Historia
// Era se una vez una fabrica de automoviles
// que los hacian a mano cada coche que se fabricaba
const makecar = ['carnumber1', 'carnumber2', 'carnumber3']; // solo fabricaban uno al día
// Llego la epoca de la tecnologia y llegaron las máquinas
let numcarmakediary = 9;
const makecarautomatic = [];
for( numcarmakediary; numcarmakediary >= 0; --numcarmakediary ){
makecarautomatic.push(numcarmakediary);
if(numcarmakediary){
console.log(`${numcarmakediary} make model two motor 8v`);
}
else if( !numcarmakediary ){
console.log(`${numcarmakediary} make model three motor 16v`);
}
else {
console.log('tomorrow more...go happy with family');
}
}
// Compararon la situacion anterior
console.log(makecar);
// Claramente la repeticion de tareas por una maquina nos favorece, benditos bucles.
console.log(makecarautomatic);
Comentamos rápidamente este ejemplo que intentaremos adaptar a todos los tipos de bucles que vamos a discutir, este bucle actúa sobre una matriz de elementos, en este caso vehículos fabricados, los bucles su hábitat natural es recorrer colecciones de elementos, matrices, listas, etc., pues tenemos que tener claro que estas colecciones su comienzo es la posición 0, entonces si digo fabricar máximo 10 coches día y comenzamos en la 0 posición, tenemos 9 posiciones máximas, siempre uno menos que lo solicitado, este concepto al final se clava en la mente, pero tiene que estar nítido para evitarnos errores.
Creo que se ve la historia tal como la quería contar, hasta el momento nuestro script eran pasivos, hacían algo paraban, ahora es como haber encontrado el enchufe de la luz, a funcionar todo el mundo, luce citas por todas partes, en cierta forma cuando asimile los bucles, su uso, los beneficios que pueden retornar fue un crecimiento fundamental, fue como dar vida a algo que podemos controlar, podemos decirle que nos revise el interior de no sé cuantos archivos y nos devuelva la primera palabra de cada archivo, ya ves que todo, a nosotros es tarea nos limitaría, para un bucle es como salir de paseo. Bueno, creo que conceptos y ejemplos superados, ¿no?, vamos a ver algunos más de la familia for, dato familia for, si for tiene algunas modificaciones posibles, que adaptan su sintaxis para ejecutarse en algunos contextos específicos.
Tras ver la familia for completa pasaremos a ver al amigo como os comente while y al primo del amigo do...while, en ese momento veremos la diferencia de funcionamiento sobre este mismo ejemplo. Sigamos, vamos on for...in.
Loops for...in
Si comentar nada, veamos el ejemplo siguiente que confeccionamos con un for, desarrollado con un for...in, una de las evoluciones que ha tenido el bucle básico for.
/*
let branch = 'Ferrari';
for( ; branch === 'Ford' ; ) {
console.log( 'Hola, soy tú Ford' );
break;
}
for( ; branch === 'Ferrari' ; ) {
console.log( 'Hola, soy tú Ferrari' );
break;
}
*/
// Utilizando for...in
const branch = ['Ferrari', 'Ford'];
for(car in branch){
if(car === 'Ferrari'){
console.log(car);
console.log( 'Hola, soy tú Ferrari' );
} else {
console.log(car);
console.log( 'Hola, soy tú Ford' );
}
}
Anteriormente, comentábamos que según el objetivo, el contexto en el que te encuentres, los datos que tengamos que manipular, utilizaremos unos u otros, por eso es tan importante, clavar en la memoria estos conceptos, por ejemplo, en el ejemplo anterior, no obtenemos el resultado que esperamos, es evidente, yo quiero un Ferrari y me devuelve dos Ford, no me conformo, para nada, quiero mi coche.
Pues vale, vemos que for...in no es el mejor loop para iterar sobre arrrays, ya que como ves no devuelve el valor del elemento dentro del bucle, si no devuelve la posición, por lo tanto, en esta búsqueda de valores, no encajaría del todo, ando buscando un Ferrari y me devuelve un Ford, no. Deberíamos usar un for tradicional que nos permite extraer y manejar un array completamente, y for...in queda para iterar sobre una colección de elementos que sea conocida, si nos fijamos, en el bucle ni damos expresión de inicio, ni expresamos condicional, ni creamos un actualizador, todo este trabajo lo crea, lo gestiona y lo realiza el propio for...in, lo único que nos pide es dar una variable itera dora, que no es más que una variable que guardara las posiciones extraídas del array en esa iteración, pasando a la siguiente al ritmo del loop, como convención común la variable itera dora en este caso car, es el singular del nombre del array, sería, cars, tal como vemos no he respetado la convención común para mostraros que estas normas, cuando hablamos de convenciones comunes, no son obligatorias, pero muestran tu perfil como desarrollador, conocer estas convenciones y aplicarlas también es importante. Por lo tanto, como hemos comentado antes, confeccionemos un bucle como es debido con el objetivo de que me traiga mi Ferrari. Si por favor. Gracias.
const brands = ['Ferrari', 'Ford', 'Mercedes', 'Bmw', 'Opel', 'Citroen', 'Renault'];
for(brand in brands){
if( brands[brand] === 'Ferrari'){
console.log( `${brands[brand]} Hola, soy tú Ferrari` );
} else {
console.log(`${brand} ${brands[brand]}, tambien tenemos a su disposicion`);
}
}
Vamos a cambiarlo de sitio por suspicacias.
const brands = ['Ford', 'Mercedes', 'Bmw', 'Ferrari', 'Opel', 'Citroen', 'Renault'];
for(brand in brands){
if( brands[brand] === 'Ferrari'){
console.log( `${brands[brand]} Hola, soy tú Ferrari` );
} else {
console.log(`${brand} ${brands[brand]}, tambien tenemos a su disposicion`);
}
}
Tal como vemos hemos confeccionado un bucle for...in, con su variable, respetando la convención, siendo el singular del nombre de la matriz, y vemos como extrae cada elemento de la matriz. Utilizando la notación de corchetes podemos extraer el valor de la posición, por lo tanto, no invalida el trabajo de este motor sobre una matriz, pero ponerse y situaciones futuras es obligación del desarrollador, y si tuviera que utilizar este for...in para recorrer el retorno de una primera conexión a una API, desconocemos el tamaño y contenido de la matriz, la matriz puede contener múltiples tipos de datos, por lo tanto, si nos abstrajéramos a esta posible situación que nuestra aplicación puede encontrarse, este tipo de motor no lo utilizaríamos, utilizaríamos un for básico para ver que contiene la matriz antes de incluso especificar más el manejo de los datos que contiene.
Loop for...of
Bueno, también podemos encontrar los valores de los elementos de un array utilizando al gemelo de loop for...in, for...of, lo que retorna son los valores de los elementos de la matriz, el funcionamiento, la sintaxis son idénticos, son gemelos, la única diferencia es con que dato trabajan, for...in, maneja la posición, for...of, maneja el valor. Creo que estas dos herramientas también pasan a la caja, bien organizadas, son un complemento perfecto para nuestro trabajo. Vemos el ejemplo anterior con for...of. También ahí que decir, que seguimos manteniendo que ante lo desconocido de una conexión inicial con una base de datos, una API, siempre es mejor conocer lo que trae, utilicemos el for básico.
const brands = ['Ford', 'Mercedes', 'Bmw', 'Ferrari', 'Opel', 'Citroen', 'Renault'];
for(brand of brands){
if( brands[brand] === 'Ferrari'){
console.log( `${brands[brand]} Hola, soy tú Ferrari` );
} else {
console.log(`${brand} ${brands[brand]}, tambien tenemos a su disposicion`);
}
}
Es visual de lo que hablamos, solo hemos modificado el in por el of, y devuelve undefined la posición de valor que antes teníamos que ir a buscarla, la retorna directamente como in retornaba la posición, y si nadie se ha percatado, me he vuelto a quedar sin mi Ferrari, la condicional no sabe por donde va, no es el dato que esperaba y me deja sin coche otra vez. Lo terminamos bien, ¿no?
const brands = ['Ford', 'Mercedes', 'Bmw', 'Ferrari', 'Opel', 'Citroen', 'Renault'];
for(brand of brands){
if( brand === 'Ferrari'){
console.log( `Hola, soy tú ${brand}`);
} else {
console.log( `Tambien tenemos a su disposicion ${brand}` );
}
}
Loop forEach() o método forEach()
Vamos a explicarlo con un ejemplo, en sí es un loop, pero con traje de método, finaliza con paréntesis, entonces eso ya nos tiene que decir algo.
const brands = ['Ford', 'Mercedes', 'Bmw', 'Ferrari', 'Opel', 'Citroen', 'Renault'];
brands.forEach((element) => console.log(element));
Aunque parezca raro, es lo mismo que hemos estado haciendo, iterar sobre un array, que nos ofrece forEach(), la facilidad de iterar sobre un elemento en exclusiva desde una función que como veis, y leemos la sintaxis, tenemos un array de marcas de coches, denominado brands, y le decimos pasa tus elementos a forEach(), uno a uno y después a través de una función de flecha, retorna por consola el valor de cada elemento iterado de la matriz. Podríamos modificar el parámetro que pasamos a la función y llamarle pepe si queremos.
const brands = ['Ford', 'Mercedes', 'Bmw', 'Ferrari', 'Opel', 'Citroen', 'Renault'];
brands.forEach((pepe) => console.log(pepe));
Sin problema, queda reflejado que la matriz ya la tiene forEach() y parámetro, dato, elemento a elemento va a iterar por ella, devolviendo o retornando lo que el bloque de la función le demande. Está operativa, esta funcionalidad es de lo más moderno que JavaScript nos ofrece en soluciones de loop o bucles. Vamos a continuar un poco más, obviamente, si hemos podido reducir toda nuestra lógica a una línea, debemos seguir aprendiendo en ese camino. A mi gusto este código es mucho más bonito, que llaves, condicionales, etc. Mmmmm, ¿falla algo?, como siempre me he quedado sin coche. No sé, creo que voy a seguir protestando, quiero mi coche.
const brands = ['Ford', 'Mercedes', 'Bmw', 'Ferrari', 'Opel', 'Citroen', 'Renault'];
brands.forEach( function(brand) {
if( brand === 'Ferrari' ){
console.log('Hola, soy tú ' + brand);
console.log('Añadido por las molestias : Climatizador + Kit deportivo, ' + 'la marca ' + brand);
}
else{
console.log('También tenemos: ' + brand);
}
})
Como vemos, podemos crear nuestras historias, repetirlas, modificarlas, con forEach() se abre un mundo de posibilidades, reduces o automatizas tantos pasos que te da tiempo a centrarte en tu objetivo, tienes disponible el elemento completamente para ti, iterara por toda la matriz, pero la especificación de trabajar uno a uno ya directamente en una función personalizada para él, me abstrae a que podríamos crear condicionales individuales, para tratar cada elemento, podría ser un panel de control para tratar a los usuarios personalmente, obtenemos otra herramienta que merece un solo estante para ella, cuando hablemos de for loop y familia, tiene su estante bien etiquetado, uso a diario y no te aburres, ya me dirás, me han dado un juguete. Seguir investigando en el uso de cada uno de ellos es fundamental para comprenderlos, pero sobre todo para ponerlos en práctica, si no en producción todavía, muy pronto seguro.
Objetos y como recorrerlos
Hemos estado comentando, discutiendo sobre loop en estos últimos párrafos, pero ante la frase JavaScript está basada en objetos, es un lenguaje POO, me veo obligado a exponer la forma que JavaScript maneja esta situación, recordamos que todo en JavaScript son objetos, los objetos contienen pares de clave:valor, por lo tanto, la base de esta situación es como recorrer un objeto y poder extraer esos pares. La forma ya la hemos visto es fundamentalmente con el loop for...in, lo vemos.
const usercamp = {
name : 'Daniel',
nick : 'Dani',
age : 52,
language : 'spain'
}
for(user in usercamp){
console.log( user + ' : ' + usercamp[user]);
}
Tal como hemos visto antes, con for...in y for...on, tenemos una amplia gama para poder trabajar con cualquier tipo de estructura, matrices, objetos, listas, apis, bases de datos. Un, pero más por favor, tal como hemos visto, los loops han evolucionado, se han adaptado, han mejorado, en nuestro empeño por ser desarrolladores no cabe más que imitarlos, repetir, practicar, repetir, practicar, evolucionar.
Bucles while y do...while
Otro tipo o incluso otra familia de bucles, son los while, el loop while básico es semejante al for básico con diferencias grandes en la sintaxis, while es mucho más sencillo de poner en marcha, tan solo con una condicional reacciona. Pero cuando veamos el primo do...while, ahí si podremos apreciar dos tipos distintos de hacer las cosas, vamos a mantener un poco el suspense como las películas. Veamos primero al amigo de for, while.
Loops while
El funcionamiento de while es el mismo que for, siempre que la condición especificada se retorne el true while entrara en su bloque de código y lo ejecutara, lo que si vamos a notar es una gran diferencia en la sintaxis, comenzamos con while, la traducción queda muestra de como funciona el amigo, mientras sea verdad sigue, tal cual. Abrimos paréntesis y le expresamos la condición que deseamos que se cumpla, cerramos paréntesis, abrimos llaves y dejamos correr nuestra imaginación en el bloque de código, cerramos llave y listo. Veamos un ejemplo conocido.
let n = 0;
while( n < 3 ) {
console.log('Soy tú loop while');
break;
}
Un detalle, si a este bucle no le pongo límite, es un bucle infinito. Algo por lo que pase, estoy pasando y pasaré es olvidarme de que while no tiene límite, si no le pongo contador, si no le digo que n de alguna manera se incremente, siempre será menor a tres, por lo tanto, la condicional siempre será verdadera y que pasa cuando un condicional siempre es verdadero dentro de un loop que se hace infinito, cuál es mi objetivo en este caso, imprimir tres veces el mensaje, pues al asunto.
let n = 0;
while( n < 3 ) {
console.log('Soy tú loop while');
n++;
console.log('Iteración número : ' + n);
//break;
}
Algo diferente con un mismo resultado, ¿no? Siempre con while hay que marcarle de cerca. While solo necesita una condición para ponerse en marcha y ya está, si nosotros no lo dirigimos es un caballo desbocado, en ocasiones nos puede ser útil, pero con mucho cariño, tal como hemos visto que for, requiere algunos condicionantes para convertirse en infinito, while propicia esta situación si no estamos muy atentos.
let condittru = true;
while(condittru === true){
console.log('Solo si es verdadero');
break;
}
for( ;condittru === true; ){
console.log('Solo si es verdadero');
break;
}
Loops do...while
Ahora que has conocido a while, vamos a ver a do...while, este loop cambia la dinámica de funcionamiento, hasta el momento todos los loops, comprueban la condicional si es verdadera entran al bloque de código y lo ejecutan si no lo es ni se asoman siquiera, bueno, pues do...while, como mínimo se asoma una vez, hace una primera pasada, ya que su condicional se comprueba al final de la iteración, por lo tanto, nos permite ejecutarlo como mínimo una vez, algo que no tenemos con el resto, nos permite dar salida a un flujo de datos que no tenemos la certeza de que pueda retornar verdadero. Creo que el ejemplo comparativo que vamos a ver nos lo aclarara.
let condittru = false;
do {
console.log('Solo la primera vez');
} while ( condittru===true );
Comprueba la condición y se detiene, ojo así como lo ves si cambiamos el valor de la variable a true, lo convertimos en un bucle infinito, creo que después de mi insistencia apreciamos porque. ¿No? Si no lo paramos, él sigue, sigue, insiste, resiste... Pongamos un ejemplo general de todo lo que hemos visto hasta el momento y juguemos un ratito con nuestro loop. Nos queda ver complementos como yo digo, aunque ya hemos visto algunos, break, continue, labered, switch, son estructuras, sintaxis, expresiones que están totalmente relacionadas con los loops y creo necesario estar como mínimo informado.
En unas pocas líneas, hemos preparado una base útil para un montón de opciones, puede buscar dentro de las notas, hace la búsqueda en el título y en el texto, seguramente habría opciones muchas más válidas e incluso mucho más vistosas, pero a título personal considero que si no nos proponemos hacer cosas, este pequeño script, seguramente con un montón de fallos y estructuras que de aquí 6 meses volveré a revisar y me sorprenderé a mí mismo, si no tenemos esa aptitud de investigación, creo que no es un buen camino para evolucionar, mi deseo es evolucionar, esa sensación de poder repasar las etapas por las que has pasado, a mí como he dicho a título personal me produce satisfacción y sobre todo, me alienta para seguir, seguir, seguir, tal como un bucle. Espero que la base esta puesta y os deseo que disfrutéis mucho repitiendo. Ahora terminamos con complementos.
Expresiones de manejo de bucles o loops, continue, break y labeled
Como he venido comentando esta sección trataremos de complementos para nuestros bucles, son complementos necesarios no nos equivoquemos, son palabras reservadas como continue y break, vamos a ver en que nos pueden ayudar, evidentemente break, lo conocemos, es un semáforo en rojo, en cuanto aparece break, se detiene el bucle y salta a la siguiente línea, tal como lo hemos estado utilizando, no tenemos claro un bucle, break y vemos primero el resultado evitándonos bucles infinitos. Entonces queda claro que continue expresa lo que dice, es un semáforo en ámbar, si lo utilizamos en while, salta a la condición, si lo utilizamos en for salta al incrementador. Vemos un ejemplo.
for(i=0; i<3; i++){
console.log(i);
continue;
}
for(i=0; i<3; i++){
console.log(i);
break;
}
Vemos la diferencia, continue terminará la iteración, saltando a la expresión actualizadora y continuando con la siguiente interacción, sin embargo, break, termina el bucle inmediatamente, sale de él.
let i= 0;
firstlabel: while(i<3){
console.log('while externo :' + i);
i++;
if(i>1){
j = 0;
secondlabel: while(j<5){
console.log('while interno :' + j);
j++;
if(j>3){
continue firstlabel;
}
}
}
}
La verdad que tener disponibles estos complementos, es alcanzar un nivel de control de tus iteraciones muy grande. Creo que en cuanto a tipos de bucles en JS, vamos bastante servidos, ahora solo queda probarlos, ver cuál te hace sentir más cómodo, ver cuál se adapta mejor a un trabajo u otro, en definitiva conocer las opciones te da la opción de decidir.