Lectura 3 - Ciclos
Lectura 3 - Ciclos
Lectura 3 - Ciclos
Ciclos 1
¿Qué aprenderás? 2
Introducción 2
Rutinas Repetitivas v/s Ciclos 3
Diagrama de Flujo 4
Ciclos y Estructuras de Control 5
Ejercicio guiado: Estructuras de control y repetitivas 6
while y do...while 7
Ejercicio guiado: Números impares 9
Ejercicio guiado: Múltiplos de cuatro 11
Ciclos anidados 12
Ejercicio guiado: Factoriales 13
Ejercicio guiado: Elementos comunes en dos listados 14
Ejercicio guiado: Encontrar elementos en un arreglo 16
Resumen 18
¡Comencemos!
_ 1
www.desafiolatam.com
¿Qué aprenderás?
● Reconocer los aspectos clave de los ciclos y estructuras de control para construir
algoritmos que requieran la utilización de ciclos anidados.
Introducción
En este capítulo abordaremos y le daremos más profundidad a las estructuras para realizar
ciclos. Manejar estos conceptos te permitirá optimizar la forma en que escribes código,
entregándote herramientas para resolver algoritmos cada vez más complejos como los que
te encontrarás en el mundo laboral.
_ 2
www.desafiolatam.com
Rutinas Repetitivas v/s Ciclos
Los ciclos en programación nos permiten llevar a cabo tareas que son repetitivas, como por
ejemplo, calcular el promedio de notas para cada estudiante. En un curso de 10 estudiantes
la operación para ello es siempre la misma: promediar y/o ponderar las notas totales y
generar una nota final. Este proceso se repite para cada uno de los estudiantes.
Consideremos que las notas de los estudiantes están guardadas dentro de un Array, luego el
código en JavaScript se vería algo así (siendo calcularPromedio la función para calcula el
promedio de un solo estudiante):
calcularPromedio(estudiante[0]);
calcularPromedio(estudiante[1]);
calcularPromedio(estudiante[2]);
calcularPromedio(estudiante[3]);
calcularPromedio(estudiante[4]);
calcularPromedio(estudiante[5]);
calcularPromedio(estudiante[6]);
calcularPromedio(estudiante[7]);
calcularPromedio(estudiante[8]);
calcularPromedio(estudiante[9]);
Si tomamos en cuenta que el proceso para calcular el promedio es el mismo para todos los
estudiantes, consideramos que es una tarea que se repite sin mayores cambios entre un
estudiante y el siguiente, entonces podemos “iterar” entre los estudiantes para realizar esta
operación:
_ 3
www.desafiolatam.com
Inicializador Usualmente es una variable asignada a un número para
definir un parámetro de inicio del ciclo, suele ser conocido
también como contador.
Diagrama de Flujo
Ya mencionados los 3 elementos básicos para realizar un ciclo, es posible hacer su símil
con los componentes vistos con anterioridad:
Inicializador: Es un proceso que consta de asignar las variables a su punto inicial, en este
caso particular “Abordar Tren” o bien, estación.
Expresión final: Proceso de incrementar (para el ejemplo) “Tren avanza una estación”.
Condición de salida/término: Rombo de decisión, en este caso las salida se evalúa mediante
la pregunta “¿Es mi estación de destino?”.
_ 4
www.desafiolatam.com
Ciclos y Estructuras de Control
Existen diferentes tipos de estructuras de control, para en este capítulo nos enfocaremos en
las relacionadas con ciclos. Ya conocemos la estructura básica for, con sus 3 componentes,
los cuales sirven para definir los parámetros de iteración de ciclo. Sin embargo, existen otras
2 palabras reservadas para alterar el funcionamiento “normal” de un ciclo: break y continue.
1
2
Para el caso del ejemplo, al cumplirse la condición i == 3 y llegar a la sentencia break, for
finaliza su ejecución, por ende, el ciclo concluye aunque la condición de término aún se
cumpla (i < 10).
De manera análoga continue (continuar en español), nos permite ignorar los comandos
siguientes en el bloque de código del ciclo sin terminar la iteración completa sino solo el
segmento actual.
_ 5
www.desafiolatam.com
1
2
4
5
6
7
8
9
● Paso 1: En el archivo script.js debes armar la estructura del ciclo repetitivo “for” para
que pueda realizar el conteo desde el número 0 hasta el número 20. Quedando de la
siguiente forma:
● Paso 2: Teniendo listo el ciclo for, proseguimos dando solución al planteamiento del
problema, en este caso se pide mostrar los números pares y contar los números
impares, además, no mostrar el número 10 y terminar el ciclo cuando se llegue al
número 19. Esto se puede lograr mediante el uso de estructuras de control if-else,
verificando si el número es par (mostrar) de lo contrario impar (contar), o es 10 o es
19 para ejecutar la acción correspondiente, como por ejemplo, en el caso de ser 10
no se debe mostrar el número, utilizando la sentencia “continue” logramos este
objetivo. Para terminar la ejecución del ciclo cuando se esté en el número 19, con la
sentencia “break” se puede detener abruptamente el ciclo. Llevando todo esto al
código encontraríamos:
var impar = 0;
_ 6
www.desafiolatam.com
for (let i = 0; i <= 20; i++) {
if (i == 10) {
continue; // se ignora cualquier otro proceso
};
if (i == 19) {
break; // se rompe el ciclo actual
};
if (i % 2 == 0) {
document.write(i+"<br>");
}else {
impar++;
};
};
document.write("La cantidad de números impares es: "+impar);
while y do...while
Como ya hemos visto, los bucles son útiles si se desea ejecutar el mismo código una y otra
vez con un valor diferente. Ejemplo de esto son los ciclos while y do-while, que se traduce al
español como “mientras” y “hacer mientras” se cumpla una condición, tienen la siguiente
estructura:
inicializador;
_ 7
www.desafiolatam.com
while (condición) {
// ...
expresión final
}
inicializador;
do {
// ...
expresión final
} while (condición);
while (1) {
console.log("Saludos");
}
do {
console.log("Saludos");
} while (1);
¿Sabes qué hace el código anterior? Cómo es posible observar, no posee inicializador ni
expresión final. Además, la condición es de tipo Number diferente de 0, por ende, su
conversión a Boolean es true. Luego, el ciclo se ejecutará infinitas veces.
Otro error bastante común que producen los ciclos infinitos en la creación de ciclos con
while es olvidar ingresar una expresión final. En el caso del siguiente ejemplo, el valor de i
nunca se incrementa, en consecuencia, siempre será menor a 10. Lo cual generaría un ciclo
infinito en nuestro navegador web al ejecutar el programa.
let i = 0;
while(i < 10) {
console.log(i);
}
_ 8
www.desafiolatam.com
let i = 0;
do {
console.log(i);
} while (i < 10);
let ingreso;
while (true) {
ingreso = prompt("Ingrese un número: ");
if (ingreso >= 10) {
break;
}
}
Se solicita mostrar los números pares y contar los números impares mediante un ciclo while
para los números comprendidos entre el 2 y el 15 (incluidos ambos), pero cuando se llegue
al número 9, el programa debe continuar y no mostrar el número en cuestión. Igualmente,
cuando se llegue al número 14 el ciclo debe ser interrumpido y terminar su ejecución.
● Paso 1: En el archivo script.js debes armar la estructura del ciclo repetitivo “while”
para que pueda realizar el conteo desde el número 2 hasta el número 15. Por lo que
debemos declarar e iniciar una variable fuera del ciclo con el valor por defecto (1) y
dar la condición al ciclo while para que termine cuando llegue al número 15.
Quedando de la siguiente forma:
let impar = 0;
let i = 1;
_ 9
www.desafiolatam.com
● Paso 2: Teniendo listo el ciclo while, proseguimos dando solución al planteamiento
del problema, en este caso se pide mostrar los números pares y contar los números
impares, además, no mostrar el número 9 y terminar el ciclo cuando se llegue al
número 14. Esto se puede lograr mediante el uso de estructuras de control if-else,
verificando si el número es par (mostrar número) de lo contrario impar (contar
número), o es 9 o es 14 para ejecutar la acción correspondiente, como por ejemplo,
en el caso de ser 9 no se debe mostrar el número, utilizando la sentencia “continue”
logramos este objetivo, y para terminar la ejecución del ciclo cuando se esté en el
número 14, con la sentencia “break” se puede detener abruptamente el ciclo.
Llevando todo esto al código encontraríamos:
let impar = 0;
let i = 1;
_ 10
www.desafiolatam.com
Ejercicio guiado: Múltiplos de cuatro
Se solicita mostrar los números múltiplos de cuatro y contar los números que no sean
múltiplo de cuatro mediante un ciclo do-while para los números comprendidos entre el 1 y el
50 (incluidos ambos), pero cuando se llegue al número 16, el programa debe continuar y no
mostrar el número en cuestión. Igualmente, cuando se llegue al número 45 el ciclo debe ser
interrumpido y terminar su ejecución. Para ello realiza los siguientes pasos:
● Paso 1: En el archivo script.js debes armar la estructura del ciclo repetitivo “do-while”
para que pueda realizar el conteo desde el número 1 hasta el número 50. Por lo que
debemos declarar e iniciar una variable fuera del ciclo con el valor por defecto (1) y
dar la condición al ciclo do-while para que termine cuando llegue al número 50.
Quedando de la siguiente forma:
let no_multiplo = 0;
let i = 1;
do{
//cuerpo de la estructura repetitiva do-while
}while(i <= 50)
let no_multiplo = 0;
let i = 1;
do {
if (i == 16) {
i++;
continue; // se ignora cualquier otro proceso
};
if (i == 45) {
break; // se rompe el ciclo actual
};
if (i % 4 == 0) {
_ 11
www.desafiolatam.com
document.write(i+"<br>");
}else {
no_multiplo++;
};
i++;
}while(i <= 50);
document.write("La cantidad de números no múltiplos de cuatro es:
"+no_multiplo);
Ciclos anidados
Resultado:
_ 12
www.desafiolatam.com
0 0
0 1
0 2
1 0
1 1
1 2
2 0
2 1
2 2
Como te diste cuenta en el ejemplo anterior el for interno se repitió 3 veces más que fue la
cantidad de iteración que realizó el for externo.
Veamos otro ejemplo y calculemos los factoriales del 1 al 10. Anteriormente realizamos
este ejercicio pero implementando recursividad de funciones, ahora lo realizaremos a través
de anidación de ciclos para poder obtener los factoriales del 1 al 10, si no recuerdas cómo
obtener el factorial de un número básicamente es multiplicar desde 1 hasta el número, por
ejemplo obtengamos el número factorial de 5 (el factorial se representa con un !).
5! = 1 * 2 * 3 * 4 * 5
var res = 1;
for (let i = 1; i <= 5; i++) {
res = res * i;
}
console.log(res);
_ 13
www.desafiolatam.com
120
Al ejecutar el código anterior, obtenemos los factoriales para los números desde el 1 hasta
el 10 mediante la anidación de ciclos repetitivos:
Factorial de 1 es: 1
Factorial de 2 es: 2
Factorial de 3 es: 6
Factorial de 4 es: 24
Factorial de 5 es: 120
Factorial de 6 es: 720
Factorial de 7 es: 5040
Factorial de 8 es: 40320
Factorial de 9 es: 362880
Factorial de 10 es: 3628800
Este código y seguramente muchos otros que desarrollemos en el futuro, son posible de
reestructurarse para mejorar su legibilidad. Para conocer cómo realizar esto paso a paso,
puedes consultar el documento Material Apoyo Lectura - Transformar ciclos en funciones,
ubicado en “Material Complementario”.
_ 14
www.desafiolatam.com
● Paso 1: Como se desea mostrar los números que sean iguales entre dos listas
generadas por ciclos repetitivos anidados, entonces vamos a crear dos ciclos for
anidados, uno del 1 al 10 y el otro del 1 al 20 y así mostrar ambas variables utilizadas
para el conteo de cada ciclo, como se muestra a continuación:
i=0
j=1
j=2
j=3
…
…
…
j=9
i=2
j=0
j=1
…
_ 15
www.desafiolatam.com
● Paso 4: Ejecutamos el programa y así se puede observar el resultado del código
anterior:
_ 16
www.desafiolatam.com
};
● Paso 3: Por último, solo queda preguntar por el estado de la variable modificada
dentro del ciclo for, esta variable por defecto se encuentra en false, solo cambia a
true si se encuentra el nombre en la lista, de lo contrario siempre será false, eso se
puede aprovechar para utilizar la estructura condicional if.
if(loEncontramos) {
console.log('Juan pertenece al curso de diseño')
}
El código anterior revisa si alguno de los valores del array es "Juan" y si lo encuentra lo
guarda para luego mostrar el mensaje, que debería dar el siguiente resultado:
● Paso 5: Para validar si los estudiantes pertenecen al curso debemos comparar cada
uno de estos en el curso y la forma de hacerlo es con ciclos anidados, veamos cómo
quedaría el código.
_ 17
www.desafiolatam.com
}
}
}
Resumen
● En esta lectura pudimos profundizar los conceptos que vimos anteriormente sobre
ciclos y funciones, agregando elementos que nos otorgan herramientas para resolver
problemas cada vez más complejos.
● Revisamos los aspectos más relevantes de ES6, como las funciones flecha, que
facilita la legibilidad del código y nos permite escribir las mismas instrucciones en
menos líneas.
_ 18
www.desafiolatam.com