CAP 03 · LEC 04·Control de flujo
for y for...of: iterar sobre colecciones
El bucle for clásico te da control total sobre el índice. for...of es la alternativa moderna para iterar valores directamente. Conoce cuándo usar cada uno.
¿Encontraste un error o algo que mejorar?Editá esta lección en GitHub →
El bucle for clásico
El for clásico tiene tres partes: inicialización, condición y actualización.
// Sintaxis: for (init; condición; actualización)
for (let i = 0; i < 5; i++) {
console.log(i);
}
// 0 1 2 3 4
// Iterar un array con índice
const frutas = ["manzana", "pera", "uva"];
for (let i = 0; i < frutas.length; i++) {
console.log(`${i}: ${frutas[i]}`);
}
// 0: manzana
// 1: pera
// 2: uva// Sintaxis: for (init; condición; actualización)
for (let i = 0; i < 5; i++) {
console.log(i);
}
// 0 1 2 3 4
// Iterar un array con índice — TypeScript infiere: frutas[i] es string
const frutas: string[] = ["manzana", "pera", "uva"];
for (let i = 0; i < frutas.length; i++) {
console.log(`${i}: ${frutas[i]}`);
}
// 0: manzana
// 1: pera
// 2: uvaSalida
0
1
2
3
4for...of: iterar valores directamente
for...of (ES6) itera sobre los valores de cualquier iterable (arrays, strings, Sets, Maps…). Es más limpio cuando no necesitas el índice.
const frutas = ["manzana", "pera", "uva"];
// for...of — solo valores
for (const fruta of frutas) {
console.log(fruta);
}
// manzana pera uva
// También funciona con strings
for (const letra of "hola") {
console.log(letra);
}
// h o l a
// Con Set (valores únicos)
const colores = new Set(["rojo", "azul", "rojo"]);
for (const color of colores) {
console.log(color);
}
// rojo azulconst frutas: string[] = ["manzana", "pera", "uva"];
// for...of — fruta: string inferido por TypeScript
for (const fruta of frutas) {
console.log(fruta);
}
// manzana pera uva
// También funciona con strings
for (const letra of "hola") {
console.log(letra);
}
// h o l a
// Con Set<string> (valores únicos)
const colores = new Set<string>(["rojo", "azul", "rojo"]);
for (const color of colores) {
console.log(color);
}
// rojo azulSalida
manzana
pera
uvaÍndice + valor con entries()
Si necesitas el índice en un for...of, usa .entries():
const nombres = ["Ana", "Luis", "Eva"];
for (const [i, nombre] of nombres.entries()) {
console.log(`${i + 1}. ${nombre}`);
}
// 1. Ana
// 2. Luis
// 3. Eva
// Map también es iterable con entries
const config = new Map([["host", "localhost"], ["port", "3000"]]);
for (const [clave, valor] of config) {
console.log(`${clave} = ${valor}`);
}
// host = localhost
// port = 3000break y continue
const numeros = [1, 2, 3, 4, 5, 6, 7, 8];
// continue: salta la iteración actual
for (const n of numeros) {
if (n % 2 !== 0) continue; // salta impares
console.log(n);
}
// 2 4 6 8
// break: sale del bucle completamente
for (const n of numeros) {
if (n > 4) break; // para cuando n > 4
console.log(n);
}
// 1 2 3 4¿Cuándo usar cada uno?
| for clásico | for...of | |
|---|---|---|
| Cuándo usarlo | Necesitas índice o control preciso de iteración | Solo necesitas los valores |
| Legibilidad | Más verboso | Conciso y claro |
| Iterables | Solo arrays/strings por índice | Cualquier iterable (Array, Set, Map, String) |
| Saltar/parar | break y continue | break y continue |
| Modificar array | Con arr[i] = valor | La variable es copia del valor |
Regla práctica
Usa for...of por defecto. Solo elige el for clásico cuando necesites el índice para modificar el array original o controlar el paso (i += 2).