Bucles en JavaScript

Introducción

En este laboratorio, aprenderá a usar bucles (loops) en JavaScript. Los bucles son un concepto fundamental en programación que le permiten ejecutar un bloque de código repetidamente. Esto es útil para tareas como iterar sobre listas de datos o realizar una acción un número específico de veces.

Explorará los tres tipos principales de bucles en JavaScript:

• Bucle for: Repite un bloque de código un número conocido de veces.
• Bucle while: Repite un bloque de código mientras una condición especificada sea verdadera.
• Bucle do-while: Similar a un bucle while, pero ejecuta el bloque de código al menos una vez antes de verificar la condición.

También aprenderá a usar la declaración break para salir de un bucle anticipadamente.

Todo su trabajo se realizará en el WebIDE. Escribirá código JavaScript en el archivo script.js, que ya está enlazado en index.html. Puede ver la salida de su código cambiando a la pestaña Web 8080 en el entorno del laboratorio.

Crear bucle for con inicializador y condición

En este paso, creará su primer bucle for. El bucle for es ideal cuando sabe de antemano cuántas veces desea repetir una acción.

La sintaxis básica de un bucle for es:
for (inicializador; condición; expresión-final) { // código a ejecutar }

• Inicializador: let i = 0 es un ejemplo. Se ejecuta una vez al principio para declarar e inicializar una variable contadora.
• Condición: i < 5 es un ejemplo. Esta expresión se comprueba antes de cada iteración del bucle. Si es verdadera, el bucle continúa; si es falsa, el bucle se detiene.

Creemos un bucle simple que genere una lista de elementos. Abra el archivo script.js desde el explorador de archivos de la izquierda y agregue el siguiente código.

const output = document.getElementById("output");
let htmlContent = "<ul>";

// Este bucle for tiene un inicializador (let i = 0) y una condición (i < 3)
for (let i = 0; i < 3; i++) {
  htmlContent += `<li>Item ${i}</li>`;
}

htmlContent += "</ul>";
output.innerHTML = htmlContent;

En este código:

• let i = 0 inicializa el contador del bucle i a 0.
• i < 3 es la condición que mantiene el bucle en ejecución mientras i sea menor que 3.
• i++ es la expresión final que incrementa el contador después de cada iteración (nos centraremos en esto en el siguiente paso).

Después de agregar el código, guarde el archivo. Luego, haga clic en la pestaña Web 8080 para ver la salida. Debería ver una lista desordenada con tres elementos.

Usar incremento en bucle for para contar

En este paso, se centrará en la tercera parte del bucle for: la expresión final, que se utiliza típicamente para incrementar el contador.

La expresión-final (por ejemplo, i++) se ejecuta al final de cada iteración del bucle. Actualiza el contador del bucle, acercándolo al punto en que la condición se vuelve falsa. i++ es una abreviatura común para i = i + 1.

Modifiquemos el bucle para contar del 1 al 5. Reemplace el código existente en script.js con el siguiente:

const output = document.getElementById("output");
let htmlContent = "<h2>Counting from 1 to 5:</h2>";

// La expresión final i++ incrementa el contador después de cada bucle
for (let i = 1; i <= 5; i++) {
  htmlContent += `Count: ${i}<br>`;
}

output.innerHTML = htmlContent;

Observe los cambios:

• El inicializador ahora es let i = 1, por lo que comenzamos a contar desde 1.
• La condición es i <= 5, por lo que el bucle se ejecuta mientras i sea menor o igual a 5.
• La expresión i++ asegura que el contador aumente con cada iteración.

Guarde el archivo y actualice la pestaña Web 8080. Verá que la salida cambia a una lista de conteos del 1 al 5.

Implementar bucle while para repetición

En este paso, aprenderá sobre el bucle while. Un bucle while continúa ejecutando un bloque de código mientras una condición especificada sea verdadera.

La sintaxis es más simple que la de un bucle for:
while (condición) { // código a ejecutar }

Con un bucle while, debe manejar la inicialización de la variable contadora antes del bucle y su incremento dentro del bucle. Olvidar incrementar el contador resultará en un bucle infinito, que puede bloquear su navegador.

Reescribamos el ejemplo de conteo anterior usando un bucle while. Reemplace el código en script.js con este:

const output = document.getElementById("output");
let htmlContent = "<h2>Counting with a while loop:</h2>";

let i = 1; // 1. Inicializador
while (i <= 5) {
  // 2. Condición
  htmlContent += `Count: ${i}<br>`;
  i++; // 3. Incremento
}

output.innerHTML = htmlContent;

Este código logra el mismo resultado que el bucle for del paso anterior, pero la estructura es diferente. El inicializador, la condición y el incremento son ahora sentencias separadas.

Guarde el archivo y revise la pestaña Web 8080. La salida debería ser idéntica a la del paso anterior, demostrando una forma diferente de lograr la misma repetición.

Añadir bucle do-while para al menos una ejecución

En este paso, explorará el bucle do-while. Este bucle es una variante del bucle while con una diferencia clave: el bucle do-while ejecutará su bloque de código al menos una vez, antes de comprobar la condición.

La sintaxis es:
do { // código a ejecutar } while (condición);

Esto es útil cuando necesita realizar una acción primero y luego decidir si debe repetirla. Veamos esto en acción con un ejemplo donde la condición es inicialmente falsa.

Reemplace el código en script.js con el siguiente:

const output = document.getElementById("output");
let htmlContent = "<h2>Testing a do-while loop:</h2>";

let i = 10; // Empezar con un valor que haga que la condición while sea falsa

// Este bucle se ejecutará una vez, aunque i no sea menor que 5
do {
  htmlContent += `The value of i is: ${i}<br>`;
  i++;
} while (i < 5);

output.innerHTML = htmlContent;

En este ejemplo, la condición i < 5 es falsa desde el principio porque i es 10. Sin embargo, como es un bucle do-while, el código dentro del bloque do se ejecuta una vez antes de que se compruebe la condición.

Guarde el archivo y mire la pestaña Web 8080. Verá el mensaje "The value of i is: 10", lo que demuestra que el bucle se ejecutó exactamente una vez.

Salir del bucle con la sentencia break

En este paso, aprenderá cómo salir de un bucle prematuramente utilizando la sentencia break. La sentencia break termina inmediatamente el bucle actual y transfiere el control a la sentencia que sigue al bucle.

Esto es útil cuando está buscando algo en un bucle y desea detenerse tan pronto como lo encuentre, sin completar las iteraciones restantes.

Usemos un bucle for que está diseñado para ejecutarse 10 veces pero se detendrá anticipadamente cuando se cumpla una determinada condición. Reemplace el código en script.js con este:

const output = document.getElementById("output");
let htmlContent = "<h2>Using the break statement:</h2>";

for (let i = 1; i <= 10; i++) {
  if (i === 6) {
    htmlContent += "Found 6! Breaking the loop.<br>";
    break; // Salir del bucle inmediatamente
  }
  htmlContent += `Current number is ${i}<br>`;
}

htmlContent += "Loop finished.";
output.innerHTML = htmlContent;

En este código, el bucle for está configurado para contar de 1 a 10. Sin embargo, la sentencia if comprueba si i es igual a 6. Cuando lo es, se ejecuta la sentencia break y el bucle termina. El código no imprimirá los números del 7 al 10.

Guarde el archivo y vea la pestaña Web 8080. Verá que el conteo se detiene en 5, seguido del mensaje "Breaking the loop".

Resumen

¡Felicitaciones por completar este laboratorio sobre bucles en JavaScript! Ha aprendido a controlar el flujo de sus programas repitiendo bloques de código.

En este laboratorio, cubrió:

• El bucle for, que es perfecto cuando conoce el número de iteraciones de antemano, utilizando un inicializador, una condición y una expresión final.
• El bucle while, que se repite mientras una condición sea verdadera y requiere la gestión manual del contador.
• El bucle do-while, que garantiza al menos una ejecución del bloque de código antes de comprobar la condición.
• La sentencia break, que proporciona una forma de salir de cualquier bucle prematuramente basándose en una condición.

Dominar los bucles es un paso fundamental para convertirse en un desarrollador de JavaScript competente. Siéntase libre de experimentar más con el código de este laboratorio para afianzar su comprensión.