Aprende a dominar los bucles en JavaScript con ejemplos simples y prácticos. Aquí verás cómo usar for, while, do-while, for...of y for...in para repetir tareas, recorrer arrays y leer objetos, aprovechando inicialización, condición, incremento, el índice i, la propiedad length y los template literals.
¿Cómo funcionan los bucles for, while y do-while en JavaScript?
Los bucles permiten ejecutar un bloque de código múltiples veces. Con for defines cuántas iteraciones habrá; con while sigues repitiendo mientras la condición sea verdadera; y con do-while ejecutas al menos una vez y luego validas.
¿Qué estructura tiene for y qué hace i?
- Estructura de for: inicialización; condición; incremento. Separadas por punto y coma.
- i suele representar el índice de iteración.
- Si la condición es i < 5, imprime de 0 a 4, porque 5 no cumple la condición.
for (let i = 0; i < 5; i++) {
console.log(i);
}
Puntos clave:
- let permite que i cambie en cada incremento.
- ; separa: inicialización; condición; incremento.
- console.log muestra el valor en cada vuelta.
¿Cuándo usar while y do-while?
- while: “sigue haciendo algo mientras se cumpla la condición”. Útil cuando no sabes cuántas repeticiones habrá.
- do-while: primero ejecuta, luego valida. Útil cuando necesitas al menos una ejecución antes de verificar.
¿Cómo iterar arrays con for y for...of?
Recorrer arrays es una tarea frecuente. Con for controlas el índice; con for...of lees directamente los valores, lo que hace el código más legible.
¿Cómo usar for con length e índice?
- Usa length para saber cuántos elementos hay.
- Muestra el índice y el valor con template literals.
const notas = ['nota uno', 'nota dos', 'nota tres'];
for (let i = 0; i < notas.length; i++) {
console.log(`Índice: ${i} -> Nota: ${notas[i]}`);
}
Ideas clave:
- length aplica a arrays y strings.
- Acceso por índice: notas[0], notas[1], notas[2].
- Mensajes claros con template literals.
¿Cómo simplificar la lectura con for...of?
- for...of itera por cada valor del array, sin manejar el índice.
- Puedes combinarlo con if para decisiones simples.
const frutas = ['manzana', 'pera', 'uva'];
for (const fruta of frutas) {
console.log(fruta);
if (fruta === 'manzana') {
console.log('Es una rica manzana');
}
}
Buenas prácticas:
- Usa const cuando no vas a reasignar la variable del valor iterado.
- Evita var: no se recomienda para nuevas implementaciones.
¿Cómo recorrer objetos con for...in y obtener clave-valor?
Cuando trabajas con objetos, necesitas leer sus propiedades. for...in recorre sus claves y te permite acceder al valor asociado.
¿Cómo obtener claves y valores de un objeto?
- for...in te da cada clave del objeto.
- Accede al valor con la notación de corchetes: objeto[clave].
const persona = { nombre: 'Ana', edad: 25 };
for (const clave in persona) {
console.log(`Clave: ${clave} -> Valor: ${persona[clave]}`);
}
Conceptos reforzados:
- Objeto con pares clave-valor.
- Combinación de bucles con condiciones como if, y potencialmente else o switch.
- Integración de conceptos: variables (const, let), validaciones, incremento, acceso por índice y por clave.
¿Quieres practicar y compartir? Comenta tus soluciones y cómo mezclas bucles con condiciones para resolver tus retos.
