Sobre ciclos o bucles

Dentro de los diferentes lenguajes de programación tenemos estructuras de código que nos ayudan a repetir un procedimiento múltiples veces. A estos les llamamos ciclos o bucles (o loops en inglés).

En JavaScript gran parte de las líneas de código que escribimos en nuestro script se ejecutan de manera secuencial. Es decir, en el orden en el que aparecen en el código.

Al llegar a un ciclo podemos repetir un conjunto de instrucciones múltiples veces. Usualmente existe una forma de salir de ese ciclo para que el resto de las instrucciones de nuestro programa puedan ser ejecutadas.

for

El ciclo de la ilustración anterior se vería algo así:

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

La estructura principal es:

for () {

}

Dentro de los paréntesis: va la lógica que le indica cuántas veces debe repetirse.

Dentro de las llaves: van las instrucciones a ejecutar en cada vuelta.

En lenguaje técnico a estas “vueltas” les llamamos iteraciones.

A su vez, la lógica dentro de los paréntesis se divide en tres segmentos:

1. Declaramos una variable para realizar un conteo. Usualmente comenzamos en cero:

let i = 0;

2. Decimos qué condición debe cumplirse para que siga dando vueltas:

i < 3;

En este caso, mientras i sea menor a 3 va a seguir iterando

3. En cada vuelta sumamos 1 al contador:

i++;

Ejemplo

Un ejemplo con el mínimo de instrucciones sería el siguiente:

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

Lo que resultará en un mensaje a la consola como este:

0
1
2
3
4
5
6
7
8
9

for...of

Nos sirve para iterar colecciones de datos que vienen en forma de arreglo (Array).

Es decir, si tuviéramos algo como:

const misMensajes = ["Hola", "¿Cómo estás?", "¿Qué tal tu día?"];

Podríamos usar esta estructura para acceder a cada uno de los mensajes y hacer algo con ellos.

for () {

}

Lo único que cambia es lo que va dentro de los paréntesis. Podríamos verlo en dos partes:

1. La declaración de una constante que guarda el dato actual

const mensaje

2. La colección de datos que queremos iterar

of misMensajes

Ejemplo

const misMensajes = ["Hola", "¿Cómo estás?", "¿Qué tal tu día?"];

for (const mensaje of misMensajes) {
  console.log(mensaje);
}

Hola
¿Cómo estás?
¿Qué tal tu día?

for...in

Nos sirve para iterar colecciones de datos que vienen en forma de objeto (Object).

Si tenemos algo como:

const miObjeto = {
  usuario: "lolzini",
  actividad: "programador",
};

Podemos acceder a la llave (key) de cada propiedad:

for (const llave in miObjeto) {
  console.log(llave);
}

usuario
actividad

Y el hecho de que tengamos la llave significa que también podemos acceder al valor, de manera que podemos crear un mensaje más completo:

for (const llave in miObjeto) {
  console.log(llave + ": " + miObjeto[llave]);
}

usuario: lolzini
actividad: programador

while

Otra de las formas de crear ciclos es usando while, la estructura es mucho más simple:

while () {

}

Dentro de los paréntesis: va la condición que debe cumplirse para que se siga repitiendo.

Dentro de las llaves: van las instrucciones a repetir.

Ejemplo

Este ciclo imprime los números del 0 al 4.

let i = 0;

while (i < 5) {
  console.log(i);
  i++;
}

0
1
2
3
4

Advertencias de uso

Debemos tener cuidado con este tipo de ciclos. Si no colocamos la lógica para que el ciclo se detenga, estaremos creando un programa que repita instrucciones de manera indefinida.

Y posiblemente se detendrá por algún error de memoria.

En otras palabras, detener el ciclo es un poco “más manual”, ya que debemos crear las variables y la lógica que hará que la condición deje de cumplirse. A pesar de eso, nos permite ser un poco más creativos con dicha lógica.

do...while

Es similar a while con la diferencia de que ejecutará las instrucciones por lo menos una vez.

La estructura se ve de la siguiente manera:

do {

} while ();

En este caso podemos ver que las llaves aparecen antes que los paréntesis. Esto nos puede ayudar a recordar que las instrucciones se ejecutan una vez y en los ciclos siguientes verifica la condición para repetir o detener el ciclo.

let i = 0;

do {
  console.log(i);
  i++;
} while (i < 5);

0
1
2
3
4

Resumiendo

Sobre otras formas de crear ciclos

A pesar de que hay otras formas de crear este tipo de comportamientos en nuestros programas o aplicaciones, las que aprendimos en este artículo suelen ser las primeras en aparecer en la mayoría de planes de estudio.

Veremos el resto en otros artículos, por ahora solo vale la pena mencionarlas:

• Funciones de alto orden
• Funciones recursivas

Comentarios