JavaScript
Compara for, for...of, entries y forEach para recorrer arrays según índices, control de flujo, efectos, asincronía y posibilidad de interrupción.
Recorrer un array significa visitar sus posiciones para leer, transformar o actuar sobre sus valores.
La herramienta adecuada depende de si necesitas índices, interrupción, valores de retorno o efectos secundarios.
const products = [
{ name: "Keyboard" },
{ name: "Mouse" },
];
for (const product of products) {
console.log(product.name);
}for (
let index = 0;
index < products.length;
index++
) {
const product = products[index];
console.log(index, product.name);
}Es útil cuando necesitas:
for (let index = 1; index < values.length; index++) {
const previous = values[index - 1];
const current = values[index];
}Evita index <= array.length; la última posición válida es length - 1.
for (const product of products) {
console.log(product.name);
}Lee valores mediante el protocolo iterable. Permite break, continue, return y throw.
for (const product of products) {
if (product.id === targetId) {
selected = product;
break;
}
}for (const [index, product] of products.entries()) {
console.log(index, product.name);
}entries devuelve un iterador de pares [index, value].
for (const index of products.keys()) {
console.log(index);
}for (const product of products.values()) {
console.log(product);
}En arrays, values() es también el iterador predeterminado usado por for...of.
products.forEach((product, index, array) => {
console.log(index, product.name);
});El callback puede recibir:
forEach siempre devuelve undefined.
const result = products.forEach(() => {});
result; // undefinedUtilízalo principalmente para efectos secundarios claros.
products.forEach(renderProduct);Para construir otro array, map o filter expresan mejor el propósito.
products.forEach((product) => {
if (!product.isActive) {
return;
}
renderProduct(product);
});return termina únicamente esa llamada del callback. Funciona de forma parecida a saltar a la siguiente iteración, pero no termina forEach ni la función exterior.
No existe un break directo dentro de forEach.
Menos claro:
let found;
products.forEach((product) => {
if (product.id === targetId) {
found = product;
}
});Más claro:
const found = products.find(
(product) => product.id === targetId,
);Elige el método por su resultado, no únicamente porque acepta un callback.
await products.forEach(async (product) => {
await saveProduct(product);
});Esto no espera las promesas retornadas por los callbacks. forEach las ignora.
Secuencia intencional:
for (const product of products) {
await saveProduct(product);
}Paralelismo intencional:
await Promise.all(
products.map((product) => saveProduct(product)),
);La decisión entre secuencia y concurrencia depende del dominio, límites externos y manejo de errores.
for (const key in products) {
console.log(key);
}for...in recorre nombres de propiedades enumerables, incluidas posibles propiedades heredadas. Los índices llegan como strings.
Para valores usa for...of; para índices usa keys, entries o un for clásico.
for (
let index = products.length - 1;
index >= 0;
index--
) {
console.log(products[index]);
}También puede crearse una copia invertida.
for (const product of products.toReversed()) {
console.log(product);
}toReversed no modifica el original.
for (const product of products) {
products.push(createProduct());
}Modificar la colección que se está recorriendo puede:
Cuando sea posible, recorre una copia o construye una nueva colección.
for (const product of [...products]) {
// El conjunto inicial de referencias queda separado.
}La copia sigue siendo superficial.
forEach determina su rango de longitud antes de comenzar. Elementos agregados más allá de esa longitud no se visitan. Posiciones eliminadas antes de ser visitadas pueden omitirse.
No uses estos detalles como mecanismo de control; evita mutar la colección durante el recorrido.
Algunos métodos omiten holes y otros iteradores producen undefined.
const sparse = new Array(3);
sparse.forEach(() => {
console.log("Called");
});
// No se llama.
for (const value of sparse) {
console.log(value);
}
// Imprime undefined tres veces.Los arrays dispersos se profundizan en su propia nota.
| Necesidad | Herramienta habitual |
|---|---|
| Índice y control detallado | `for` |
| Valores con `break` o `continue` | `for...of` |
| Índice y valor | `for...of` • `entries()` |
| Efecto por elemento | `forEach` o `for...of` |
| Crear otro array | `map`, `filter`, `flatMap` |
| Encontrar un elemento | `find` |
| Detenerse con lógica compleja | `for...of` |
function findInvalidItem(items) {
for (const [index, item] of items.entries()) {
const error = validateItem(item);
if (error) {
return {
index,
item,
error,
};
}
}
return null;
}El bucle se detiene al encontrar el primer error y conserva su índice.
<= array.length.forEach cuando necesitas break.forEach.for...in para leer valores.await y forEach esperando una secuencia.for ofrece control del índice.for...of consume valores y permite interrumpir.entries entrega pares de índice y valor.forEach devuelve undefined y no acepta break.return dentro de forEach solo termina el callback actual.forEach.for...in recorre nombres de propiedades.¿Cuál opción utilizarías para guardar productos en secuencia, esperando cada operación antes de continuar?
Un for...of con await dentro. forEach no espera las promesas retornadas por sus callbacks.
Métodos mutables y alternativas no mutables organiza las operaciones que cambian un array y las que producen una nueva colección.