JavaScript for…in: sintaxis, uso, diferencias con for…of y errores comunes

By 佐川 直弘 | Naohiro Sagawa (運営者)

※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　

1. Introducción | ¿Qué problemas resuelve el bucle for…in?

Objetivo de este artículo

• Sintaxis básica y uso del bucle for…in en JavaScript
• Precauciones al usarlo con arrays
• Diferencias frente a otros bucles (for…of y forEach)
• Errores habituales y sus soluciones

Qué aprenderás

• Cómo procesar eficientemente propiedades y elementos de objetos y arrays
• Puntos de atención del bucle for…in y cómo usarlo de forma segura
• Ejemplos prácticos de código y comparaciones de rendimiento

2. ¿Qué es el bucle for…in en JavaScript? [Guía básica]

Sintaxis básica

for (変数 in オブジェクト) { // 繰り返し処理 }

• 変数 (variable): almacena el nombre de la propiedad (clave) actual.
• オブジェクト (objeto): el objeto objetivo sobre el cual iterará el bucle.

Ejemplo: enumerar propiedades de un objeto

const person = { name: "太郎", age: 25, city: "東京" };

for (const key in person) {
console.log(${key}: ${person[key]});
}

name: 太郎 age: 25 city: 東京

Nota: el orden de las propiedades no está garantizado

Resumen de características

1. Obtención sencilla de claves de objeto: útil cuando necesitas obtener dinámicamente los nombres de propiedades.
2. Sólo propiedades enumerables: las propiedades no enumerables (enumerable: false) no se recorren.
3. También enumera propiedades heredadas del prototipo: veremos por qué esto puede ser un problema en la siguiente sección.

3. Arrays y for…in | Puntos a tener en cuenta

Comportamiento básico con arrays

const fruits = ["りんご", "バナナ", "みかん"];

for (const index in fruits) {
console.log(index, fruits[index]);
}

0 りんご 1 バナナ 2 みかん 

Precaución 1: también puede enumerar propiedades del prototipo

Array.prototype.newMethod = function () { return "新しいメソッド"; };

for (const index in fruits) {
console.log(index, fruits[index]);
}

0 りんご 1 バナナ 2 みかん newMethod undefined

for (const index in fruits) { if (fruits.hasOwnProperty(index)) { console.log(index, fruits[index]); } }

Precaución 2: no hay garantía de orden

const data = []; data[10] = "リンゴ"; data[1] = "バナナ"; data[5] = "みかん";

for (const index in data) {
console.log(index, data[index]);
}

1 バナナ 5 みかん 10 リンゴ

Precaución 3: los índices numéricos se tratan como cadenas

const numbers = [10, 20, 30]; for (const index in numbers) { console.log(typeof index); // "string" }

for (const index in numbers) { const numIndex = parseInt(index, 10); console.log(numIndex, numbers[numIndex]); }

Resumen

• for…in es más adecuado para objetos que para arrays.
• Si necesitas manejar el orden o índices numéricos, se recomienda for…of o el for tradicional.

4. Diferencias entre for…in y for…of [con tabla comparativa]

Comparación de sintaxis

const obj = { a: 1, b: 2, c: 3 }; for (const key in obj) { console.log(key); // キーを取得 }

const arr = [10, 20, 30]; for (const value of arr) { console.log(value); // 値を取得 }

Tabla comparativa

Ejemplo práctico: diferencias al procesar arrays

const arr = ['a', 'b', 'c'];

// for...in
for (const index in arr) {
console.log(index); // 出力: 0, 1, 2
}

// for...of
for (const value of arr) {
console.log(value); // 出力: 'a', 'b', 'c'
}

Resumen

• for…in: adecuado para trabajar con claves de objetos.
• for…of: ideal para arrays y objetos iterables.

5. Parte práctica: casos de uso y buenas prácticas con for…in

1. Caso de uso: filtrar propiedades de un objeto

const user = { name: "田中", age: 30, email: "tanaka@example.com", password: "secret123" };

const publicData = {};
for (const key in user) {
if (key !== "password") {
publicData[key] = user[key];
}
}
console.log(publicData);

{ name: '田中', age: 30, email: 'tanaka@example.com' }

2. Caso de uso: procesar objetos anidados

const data = { user: { name: "佐藤", info: { age: 28, city: "大阪" } } };

function printNested(obj) {
for (const key in obj) {
if (typeof obj[key] === "object") {
printNested(obj[key]);
} else {
console.log(${key}: ${obj[key]});
}
}
}

printNested(data);

name: 佐藤 age: 28 city: 大阪

3. Buena práctica: excluir propiedades de la cadena de prototipos

const obj = { a: 1, b: 2 }; Object.prototype.c = 3;

for (const key in obj) {
if (obj.hasOwnProperty(key)) {
console.log(${key}: ${obj[key]});
}
}

a: 1 b: 2

Resumen

• Se presentaron usos adecuados para filtrado y objetos anidados.
• Para evitar efectos de la herencia de prototipos, utiliza hasOwnProperty().

6. Errores habituales con for…in y cómo solucionarlos [imprescindible para principiantes]

1. Error: se enumeran propiedades del prototipo

const obj = { a: 1, b: 2 }; Object.prototype.c = 3;

for (const key in obj) {
console.log(key, obj[key]);
}

a 1 b 2 c 3

for (const key in obj) { if (obj.hasOwnProperty(key)) { console.log(key, obj[key]); } }

2. Error: uso de for…in con arrays

const arr = [10, 20, 30]; Array.prototype.extra = "追加データ";

for (const index in arr) {
console.log(index, arr[index]);
}

0 10 1 20 2 30 extra undefined

for (const value of arr) { console.log(value); }

3. Error: manejo de valores indefinidos

const obj = { a: 1, b: undefined, c: 3 };

for (const key in obj) {
console.log(key, obj[key]);
}

for (const key in obj) { const value = obj[key] ?? "デフォルト値"; console.log(key, value); }

Resumen

• Propiedades del prototipo: usa hasOwnProperty().
• Procesamiento de arrays: se recomienda for…of o forEach.
• Valores indefinidos: establece valores por defecto.

7. Rendimiento de for…in y alternativas

1. Comparación de rendimiento

const obj = { a: 1, b: 2, c: 3 }; console.time("for...in"); for (const key in obj) { console.log(key, obj[key]); } console.timeEnd("for...in");

console.time("Object.keys"); Object.keys(obj).forEach(key => { console.log(key, obj[key]); }); console.timeEnd("Object.keys");

2. Ejemplo de resultados comparativos

for...in: 0.015ms Object.keys: 0.005ms

3. Recomendaciones

• Objetos: se recomienda Object.keys().
• Arrays: for…of o forEach suelen ser más seguros y rápidos.

Resumen

• for…in es útil, pero conviene elegir la construcción adecuada considerando rendimiento y seguridad.

8. Resumen | Comprensión de for…in y próximos pasos

1. Puntos clave del artículo

1. Sintaxis y uso de for…in:

• Se utiliza para iterar los nombres de propiedad de un objeto.
• Está orientado a claves de objetos más que a arrays.

1. Precauciones al usarlo con arrays:

• No hay garantía de orden y existe el riesgo de enumerar la cadena de prototipos.
• Para arrays se recomienda for…of o forEach().

1. Diferencias entre for…in y for…of:

• for…in: enumera nombres de propiedad (claves).
• for…of: procesa directamente los valores de arrays e iterables.

1. Casos prácticos y buenas prácticas:

• Procesamiento recursivo de objetos anidados.
• Exclusión de herencia de prototipos con hasOwnProperty().
• Alternativas como Object.keys() y Object.entries() para mejorar rendimiento y seguridad.

1. Optimización de rendimiento:

• Object.keys() + forEach() ofrece orden y buen rendimiento, por lo que se recomienda como alternativa a for…in.

2. Preguntas frecuentes

• R: Es adecuado para enumerar propiedades de objetos, pero para arrays o cuando el rendimiento es crítico, otras opciones (for…of u Object.keys()) son más seguras y eficientes.

• R: Sí, por especificación las propiedades heredadas también pueden aparecer. Para evitarlas, utiliza hasOwnProperty().

• R:
• Objeto: usa for…in o Object.keys().
• Array: se recomienda for…of o forEach().

3. Próximos pasos | Temas para seguir aprendiendo

1. Iterables y objetos iterables:

• Estructuras como Map, Set, WeakMap, WeakSet y los bucles adecuados para procesarlas.

1. Manipulación de datos con funciones de orden superior:

• Uso y casos de map(), filter() y reduce().

1. Técnicas avanzadas con objetos y arrays:

• Procesamiento con Object.values() y Object.entries().

1. Novedades de JavaScript:

• Sintaxis moderna (por ejemplo, operador spread y desestructuración) para escribir código más conciso.

1. Asincronía y Promise/Async/Await:

• Aplicaciones a la obtención de datos y operaciones dinámicas con objetos en tiempo real.

4. Conclusión | Domina los bucles de JavaScript

• for…in es ideal para enumerar propiedades de objetos, pero para arrays o cuando prima el rendimiento conviene usar otros métodos.
• Para evitar errores o comportamientos inesperados, aplica siempre buenas prácticas y medidas de seguridad al programar.