Ciclos en JavaScript: for, while, for…of, break y continue

Los ciclos permiten repetir instrucciones sin copiar el mismo código muchas veces.

for

Usamos for cuando conocemos o podemos controlar claramente cuántas repeticiones queremos realizar. Reúne inicialización, condición y actualización en una sola estructura.

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

Cómo leer un for

inicio → condición → código → actualización → condición...

Tabla de multiplicar

const numero = 7;

for (let i = 1; i <= 10; i++) {
    console.log(`${numero} x ${i} = ${numero * i}`);
}

while

while repite un bloque mientras una condición sea verdadera. Es útil cuando no sabemos de antemano cuántas veces necesitaremos repetir.

let contador = 1;

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

do…while

En do...while la condición se evalúa al final, por eso el bloque se ejecuta al menos una vez.

let opcion = 1;

do {
    console.log("La opción es", opcion);
    opcion++;
} while (opcion <= 3);

La diferencia es que el bloque se ejecuta al menos una vez.

Recorrer un array con for

const nombres = ["Ana", "Luis", "María"];

for (let i = 0; i < nombres.length; i++) {
    console.log(nombres[i]);
}

for…of

for...of recorre directamente los valores de un array u otra estructura iterable. Es más simple que trabajar con índices cuando sólo necesitamos cada elemento.

const nombres = ["Ana", "Luis", "María"];

for (const nombre of nombres) {
    console.log(nombre);
}

for...of resulta muy cómodo para recorrer valores de estructuras iterables como arrays.

break

break corta el ciclo inmediatamente. Conviene usarlo cuando ya encontramos el resultado buscado y seguir recorriendo sería innecesario.

for (let i = 1; i <= 10; i++) {
    if (i === 6) {
        break;
    }

    console.log(i);
}

continue

continue salta solamente la iteración actual y continúa con la siguiente.

for (let i = 1; i <= 5; i++) {
    if (i === 3) {
        continue;
    }

    console.log(i);
}

Acumuladores

const numeros = [4, 7, 2, 9];
let suma = 0;

for (const numero of numeros) {
    suma += numero;
}

console.log(suma);

Buscar un valor

const numeros = [3, 8, 12, 5];
const buscado = 12;
let encontrado = false;

for (const numero of numeros) {
    if (numero === buscado) {
        encontrado = true;
        break;
    }
}

console.log(encontrado);

Bucles infinitos

Un ciclo se vuelve infinito si su condición nunca deja de ser verdadera.

let i = 1;

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

Ejercicio

Recorré un array de notas, calculá el promedio y contá cuántas están aprobadas.

Errores comunes

• olvidar actualizar el contador;
• usar una condición incorrecta;
• confundir índice con valor;
• usar un ciclo cuando ya existe un método de array más expresivo;
• crear bucles infinitos.

Seguí aprendiendo JavaScript

← Condicionales en JavaScript: if, else, switch y operadores lógicos

Funciones en JavaScript: parámetros, return, scope y arrow functions →