Lectura 3 - Ciclos

Descargar como pdf o txt
Descargar como pdf o txt
Está en la página 1de 18

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.

● Desarrollar algoritmos utilizando ciclos de instrucciones if/else y ciclos anidados,


para resolver un problema de baja complejidad

Introducción

Los lenguajes de programación en general nos permiten realizar tareas de cualquier


naturaleza de manera rápida, esto es bastante beneficioso cuando la tarea a realizar es de
carácter repetitivo, es decir, una misma tarea ejecutándose múltiples veces bajo parámetros
ligeramente diferentes.

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:

ciclo(estudiante = 1; estudiante = 10; estudiante++) {


calcularPromedio(estudiante)
}

Un ciclo en programación suele tener 3 elementos para realizar su ejecució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.

Condición de Corresponde a un Boolean, que define si se debe continuar


salida/término con el ciclo o se debe detener.

Expresión final Corresponde a una expresión u operación que se ejecuta al


final del bloque del ciclo, suele ser una operación que acerca
el contador a la condición de salida.
Tabla 1. Elementos de un ciclo
Fuente: Desafío Latam

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:

Imagen 1. Diagrama de flujo para un viaje en tren.


Fuente: Desafío Latam

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.

La palabra break en español significa quebrar y efectivamente eso es lo que logra en un


ciclo, desde el punto (línea) donde se escribe esta palabra, el ciclo se interrumpe, quiebra o
finaliza.

for (let i = 1; i < 10; i++) {


if (i == 3) {
break;
}
console.log(i);
}

El resultado en la consola del navegador será el siguiente:

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.

for (let i = 1; i < 10; i++) {


if (i == 3) {
continue; // se ignora la sentencia 'console.log()'
}
console.log(i);
}

El resultado en la consola del navegador será el siguiente:

_ 5

www.desafiolatam.com
1
2
4
5
6
7
8
9

Ejercicio guiado: Estructuras de control y repetitivas

Desarrollemos un ejercicio utilizando estructuras de control y repetitivas, el cual nos


permitirá identificar y diferenciar entre ambas estructuras, así como el funcionamiento y
utilización de cada una. El ejercicio consiste en mostrar los números pares y contar los
números impares mediante un ciclo for para los números comprendidos entre el 0 y el 20
(incluidos ambos), pero cuando se llegue al número 10, el programa debe continuar y no
mostrar el número en cuestión, igualmente, cuando se llegue al número 19 el ciclo debe ser
interrumpido y terminar su ejecución. Para ello, sigamos los siguientes pasos:

● 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:

for (let i = 0; i <= 20; i++) {


//cuerpo del ciclo repetitivo
}

● 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);

Al ejecutar el código anterior, el resultado mostrado en nuestro navegador sería:

Imagen 2. Resultado final del ejercicio en el navegador.


Fuente: Desafío Latam

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);

Debido a que no son parte integral de la estructura while/do...while el inicializador y la


expresión final no tienen por qué utilizar esos lugares y pueden incluso estar ausentes. Es
necesario tener en cuenta que la ausencia de alguno de estos elementos puede causar
diversos problemas, como una iteración infinita o la no ejecución del bloque si la condición
no se cumple, desde un inicio con el caso del while. Recuerda que la diferencia entre while y
do...while es que este último se ejecuta al menos 1 vez ya que la condición se evalúa al final
del bloque y no antes de como en el while.

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);

Otro aspecto importante a considerar, es que debes definir en algún momento un


inicializador para hacer la condición válida. Todos los puntos anteriores son
recomendaciones y no son “exigidas” por JavaScript. Esto es porque con las herramientas
vistas, es posible emular un ciclo normal, por ejemplo, si se desea solicitar indefinidamente
a un usuario que ingrese un número hasta que el usuario ingrese un número que sea mayor
o igual a 10, debemos implementar el break para romper el ciclo y poder salir de él, como se
muestra a continuación:

let ingreso;
while (true) {
ingreso = prompt("Ingrese un número: ");
if (ingreso >= 10) {
break;
}
}

Ejercicio guiado: Números impares

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;

while(i <= 15) {


//cuerpo de la estructura repetitiva while
}

_ 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;

while(i <= 15) {


i++;
if (i == 9) {
continue; // se ignora cualquier otro proceso
};
if (i == 14) {
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);

Al ejecutar el código anterior, el resultado en nuestro navegador sería:

Imagen 3. Resultado final del ejercicio en el navegador.


Fuente: Desafío Latam

_ 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)

● Paso 2: Teniendo listo el ciclo do-while, proseguimos dando solución al


planteamiento del problema, en este caso se pide mostrar los números múltiplos de
cuatro y contar los que no son múltiplos de cuatro, además, no mostrar el número 16
y terminar el ciclo cuando se llegue al número 45. Esto se puede lograr mediante el
uso de estructuras de control if-else, verificando si el número es múltiplo de cuatro
(mostrar número) de lo contrario no es múltiplo de cuatro (contar número). Llevando
todo esto al código encontraríamos:

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);

Al ejecutar el código anterior, el resultado en nuestro navegador sería:

Imagen 4. Resultado final del ejercicio en el navegador.


Fuente: Desafío Latam

Ciclos anidados

Se conocen como ciclos anidados cuando la declaración de un ciclo es otro ciclo,


generalmente usamos ciclos anidados cuando usamos operaciones un poco más
complejas, veamos el siguiente ejemplo.

Busquemos todas las combinaciones entre el elemento a y b:

for(let i = 0; i < 3; i++) {


for(let j = 0; j < 3; j++) {
console.log(i,j);
}
}

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

El resultado de la multiplicación sería 120, entonces 5! = 120.

Ejercicio guiado: Factoriales

Desarrollar un programa utilizando JavaScript que permita encontrar el factorial del 1 al 10


implementando anidación de ciclos repetitivos. Sigamos los pasos a continuación:

● Paso 1: Separar el problema en partes. Lo primero que haremos será calcular el


factorial de un número, analizando la fórmula podemos darnos cuenta lo más
apropiado es usar un for para resolver el problema.

var res = 1;
for (let i = 1; i <= 5; i++) {
res = res * i;
}
console.log(res);

Al ejecutar el código obtenemos:

_ 13

www.desafiolatam.com
120

● Paso 2: Hemos generado el código para calcular el número factorial de 5, pero


nosotros necesitamos obtener los primeros 10 factoriales y para eso necesitamos
repetir el código anterior 10 veces, así que utilizaremos un ciclo dentro de otro.

for (let i = 1; i <= 10; i++) {


let res = 1;
for (let j= 1; j <= i; j++) {
res = res * j;
}
console.log("Factorial de " + i + " es: " + res);
}

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”.

Ejercicio guiado: Elementos comunes en dos listados

Desarrollar un programa utilizando JavaScript que permita encontrar los elementos


comunes entre dos listados de números realizados con ciclos repetitivos anidados, uno va
del 1 al 5 y el segundo del 1 al 10. Por consiguiente:

_ 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:

for(let i = 0; i < 5; i++) {


console.log("i: "+i);
for(let j = 0; j < 10; j++) {
console.log("j: "+j);
}
}

● Paso 2: Ejecutamos el código anterior y obtendremos lo siguiente:

i=0
j=1
j=2
j=3



j=9
i=2
j=0
j=1

● Paso 3: Como se puede apreciar en la ejecución anterior, primero se muestran el


valor del contador “i” y luego todos los valores del contador “j”, repitiendo el ciclo
hasta llegar a la última iteración del contador “i” por ser el contador externo. Ahora si
debemos buscar los elementos que sean iguales entre ambas listas, para ello basta
con preguntar mediante una estructura repetitiva si las variables de cada ciclo for
son igual (ciclos repetitivos for anidados), quedando de la siguiente forma:

for(let i = 0; i < 5; i++) {


for(let j = 0; j < 10; j++) {
if(i == j) {
console.log("El número "+ i +" se encuentra en ambos
listados")
}
}
}

_ 15

www.desafiolatam.com
● Paso 4: Ejecutamos el programa y así se puede observar el resultado del código
anterior:

El número 0 se encuentra en ambos listados


El número 1 se encuentra en ambos listados
El número 2 se encuentra en ambos listados
El número 3 se encuentra en ambos listados
El número 4 se encuentra en ambos listados

Ejercicio guiado: Encontrar elementos en un arreglo

Desarrollar un programa utilizando JavaScript partiendo del nombre específico de un


estudiante, Juan. Se solicita verificar mediante un arreglo si este estudiante se encuentra en
el curso de Diseño donde existe una lista de 5 estudiantes: Pedro, María, Diego, Juan y
Paola.

● Paso 1: En el archivo script.js, inicializamos las variables para el nombre del


estudiante que se desea buscar y para almacenar la lista de estudiantes del curso,
por lo que quedaría:

let estudiante = "Juan"


let cursoDiseno = ["Pedro","Maria","Diego","Juan","Paola"]

● Paso 2: En este ejercicio se solicita verificar si "Juan" pertenece al curso de Diseño,


por lo que deberíamos ver si “Juan” está en alguna de las posiciones del array. Para
esto, se puede implementar un ciclo con for para hacer tantas iteraciones como
nombres existan en la lista de alumnos, luego dentro del ciclo for utilizando
estructuras condicionales como el if, comprobaremos si el estudiante se encuentra
dentro de esa lista, accediendo a cada una de las posiciones del arreglo y
preguntando si son iguales los nombres. Para acceder a una posición específica en
una variable que contiene un arreglo se implementan los corchetes después del
nombre de la variable. En el caso de encontrarse, modificamos el estado de una
variable con dato booleano de falso a verdadero.

let loEncontramos = false;


for (let i = 0; i < cursoDiseno.length; i++) {
if(cursoDiseno[i] === estudiante) {
loEncontramos = true;
};

_ 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.

let loEncontramos = false;


for (let i = 0; i < cursoDiseno.length; i++) {
if(cursoDiseno[i] === estudiante) {
loEncontramos = true
}
}

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:

Juan pertenece al curso de diseño

● Paso 4: Ahora imagina que en vez de buscar un estudiante te piden revisar si 2


estudiantes (Juan y Maria) pertenecen al curso de Diseño. Como te habrás dado
cuenta, ahora tenemos un listado de estudiantes que buscar en otro listado, muy
parecido al ejemplo anterior de los números comunes en dos listados, veamos el
código:

let estudiantes = ["Juan","Maria"]


let cursoDiseno = ["Pedro","Maria","Diego","Juan","Paola"]

● 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.

let loEncontramos = false;


for (let j = 0; j <= cursoDiseno.length; j++) {
for (let i = 0; i <= estudiantes.length; i++) {
if(cursoDiseno[j] === estudiantes[i]) {
console.log( estudiantes[i] + ' pertenece al curso de diseño')

_ 17

www.desafiolatam.com
}
}
}

Al ejecutar el código deberíamos ver lo siguiente:

Juan pertenece al curso de diseño


Maria pertenece al curso de diseño

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.

● Conocimos aspectos relativos a la estructura de una función y sus tipos. Además,


vimos que las variables tienen un alcance, lo que nos permite hacer que nuestro
código sea seguro y no tenga comportamientos inesperados.

● 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.

● Finalmente, retomamos el concepto de ciclos y estructuras de control, pero esta vez


los anidamos para resolver lógicas más avanzadas.

● Como ves, hemos avanzado a pasos agigantados, utilizando recursos que


manejamos y agregando detalles que nos han abierto un abanico de posibilidades.

● En programación, por lo general ocurre esto: es necesario comprender las bases,


porque sobre ellas se sustentan las lógicas que nos permitirán convertirnos en
expertos programadores.

_ 18

www.desafiolatam.com

También podría gustarte