Declaración for…in de JavaScript explicada: sintaxis, errores comunes y buenas prácticas

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

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

1. Introducción｜¿Qué problemas puede resolver la sentencia for…in?

JavaScript es uno de los lenguajes de programación más utilizados en el desarrollo web. Entre sus muchas características, el procesamiento de bucles es esencial para manejar datos de forma repetida.

En particular, la sentencia for…in resulta útil cuando se itera sobre las propiedades de un objeto.

Propósito de este artículo

Este artículo explica con detalle los siguientes puntos:

• La sintaxis básica y el uso de la sentencia for…in de JavaScript
• Consideraciones importantes al usarla con arreglos
• Diferencias respecto a otras construcciones de bucle como for…of y forEach
• Errores comunes y sus soluciones

Qué aprenderás con este artículo

• Cómo procesar de forma eficiente las propiedades de objetos y los elementos de arreglos
• Precauciones y patrones de uso seguro para la sentencia for…in
• Ejemplos de código prácticos y comparaciones de rendimiento

Este artículo está estructurado para ayudar a desarrolladores de JavaScript, desde principiantes hasta intermedios, a adquirir conocimientos prácticos que puedan aplicar en proyectos reales.

Ahora, echemos un vistazo más de cerca a los fundamentos de la sentencia for…in en la siguiente sección.

2. ¿Qué es la sentencia for…in de JavaScript? [Basic Explanation]

En JavaScript, la sentencia for…in se utiliza para iterar sobre las propiedades de un objeto. Esta sintaxis es particularmente adecuada para objetos, ya que permite procesar cada nombre de propiedad (clave) una a una.

Sintaxis básica

A continuación se muestra la sintaxis básica de la sentencia for…in.

for (variable in object) {
  // 반복 처리
}

Descripción de los parámetros:

• variable : Almacena el nombre de la propiedad actual (clave).
• object : El objeto que se desea iterar.

Ejemplo: Enumerar propiedades de un objeto

const person = {
  name: "Taro",
  age: 25,
  city: "Tokyo"
};

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

Salida:

name: Taro
age: 25
city: Tokyo

Nota importante: Orden de las propiedades enumeradas

Con la sentencia for…in, el orden de las propiedades no está garantizado. Según la especificación de JavaScript, cuando las claves son cadenas, no necesariamente se procesan en el orden en que fueron añadidas. Si necesitas un orden estricto, deberías usar otros enfoques como Object.keys().

Características clave

1. Acceso fácil a las claves del objeto: Resulta útil cuando necesitas obtener dinámicamente los nombres de las propiedades de un objeto.
2. Solo se incluyen propiedades enumerables: Las propiedades no enumerables (enumerable: false) se excluyen.
3. También se enumeran propiedades heredadas del prototipo: Esto puede generar problemas, que se explicarán en detalle en la siguiente sección.

3. Arreglos y la sentencia for…in｜Puntos importantes a tener en cuenta

La sentencia for…in en JavaScript está diseñada para enumerar propiedades de objetos, pero también puede usarse con arreglos. Sin embargo, al aplicarla a arreglos existen varias advertencias importantes. Esta sección explica su comportamiento y los posibles inconvenientes en detalle.

Comportamiento básico con arreglos

Considera el siguiente ejemplo.

const fruits = ["Apple", "Banana", "Orange"];

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

Salida:

0 Apple  
1 Banana  
2 Orange

Precaución 1: Las propiedades del prototipo pueden ser enumeradas

Array.prototype.newMethod = function () {
  return "New method";
};

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

Salida:

0 Apple  
1 Banana  
2 Orange  
newMethod undefined

Solución:

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

Precaución 2: El orden no está garantizado

const data = [];
data[10] = "Apple";
data[1] = "Banana";
data[5] = "Orange";

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

Salida:

1 Banana  
5 Orange  
10 Apple

Precaución 3: Los índices se tratan como cadenas

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

Solución:

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

Resumen

• La sentencia for…in es más adecuada para objetos que para arreglos.
• Cuando el orden o los índices numéricos son importantes, se recomienda usar for…of o un bucle for estándar.

4. Diferencias entre las sentencias for…in y for…of [With Comparison Table]

En JavaScript, tanto la sentencia for…in como la for…of se utilizan para iterar, pero sus propósitos y comportamientos difieren significativamente.

Comparación de sintaxis básica

for…in:

const obj = { a: 1, b: 2, c: 3 };
for (const key in obj) {
  console.log(key); // Retrieves keys
}

for…of:

const arr = [10, 20, 30];
for (const value of arr) {
  console.log(value); // Retrieves values
}

Tabla comparativa

Ejemplo práctico | Diferencias en el procesamiento de arreglos

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

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

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

Resumen

• for…in: Más adecuado para procesar claves de objetos.
• for…of: Ideal para arreglos y objetos iterables.

5. Ejemplos prácticos: Uso avanzado y buenas prácticas para la sentencia for…in

Esta sección presenta ejemplos avanzados del uso de la sentencia for…in en JavaScript, junto con buenas prácticas útiles en el desarrollo real.

1. Ejemplo 1 | Filtrado de propiedades de un objeto

const user = {
  name: "Tanaka",
  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);

Salida:

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

2. Ejemplo 2 | Procesamiento de objetos anidados

const data = {
  user: {
    name: "Sato",
    info: {
      age: 28,
      city: "Osaka"
    }
  }
};

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

printNested(data);

Salida:

name: Sato
age: 28
city: Osaka

3. Buena práctica | Exclusión de propiedades del prototipo

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

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

Salida:

a: 1
b: 2

Resumen

• Presentamos casos de uso efectivos para filtrar objetos y procesar objetos anidados.
• Utiliza hasOwnProperty() para evitar problemas causados por la herencia del prototipo.

6. Errores comunes con la sentencia for…in y cómo solucionarlos [Beginner-Friendly]

1. Ejemplo de error 1 | 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]);
}

Salida:

a 1
b 2
c 3

Solución:

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

2. Ejemplo de error 2 | Uso de for…in con arreglos

const arr = [10, 20, 30];
Array.prototype.extra = "Additional data";

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

Salida:

0 10
1 20
2 30
extra undefined

Solución:

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

3. Ejemplo de error 3 | Manejo de valores undefined

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

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

Solución:

for (const key in obj) {
  const value = obj[key] ?? "Default value";
  console.log(key, value);
}

Resumen

• Problemas con propiedades del prototipo: Use hasOwnProperty().
• Procesamiento de arrays: Prefiera for…of o forEach.
• Manejo de valores undefined: Asigne valores por defecto.

7. Pruebas de rendimiento de la sentencia for…in y enfoques alternativos

1. Comparación de rendimiento

for…in:

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");

Object.keys():

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

2. Ejemplo de resultados de la comparación

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

3. Enfoques recomendados

• Procesamiento de objetos: Se recomienda Object.keys().
• Procesamiento de arrays: for…of o forEach es más rápido y seguro.

Resumen

• La sentencia for…in es conveniente, pero debe elegir la sintaxis adecuada según los requisitos de rendimiento y seguridad.

8. Resumen｜Comprendiendo la sentencia for…in y los próximos pasos

1. Principales conclusiones de este artículo

1. Sintaxis básica y propósito de la sentencia for…in:

• Se utiliza para iterar sobre los nombres de propiedades de un objeto.
• Especializada para procesar claves de objetos en lugar de arrays.

1. Consideraciones importantes al usarla con arrays:

• El orden no está garantizado y pueden enumerarse propiedades de la cadena de prototipos.
• Para procesar arrays, se recomienda for…of o forEach().

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

• for…in: Enumera nombres de propiedades (claves).
• for…of: Procesa directamente los valores de arrays y objetos iterables.

1. Uso avanzado y mejores prácticas:

• Procesar objetos anidados mediante recursión.
• Excluir la herencia del prototipo usando hasOwnProperty().
• Mejorar el rendimiento y la seguridad con alternativas como Object.keys() y Object.entries().

1. Optimización del rendimiento:

• Object.keys() + forEach() se recomienda como alternativa a for…in porque garantiza el orden y ofrece mejor rendimiento.

2. Respuestas a preguntas comunes

P1. ¿Debería evitarse la sentencia for…in?

• R: Es adecuada para enumerar propiedades de objetos, pero para arrays o tareas críticas de rendimiento, otros enfoques como for…of o Object.keys() son más seguros y eficientes.

P2. ¿El problema de enumeración de propiedades del prototipo ocurre siempre?

• R: Sí. Según la especificación, se incluyen las propiedades heredadas del prototipo. Para evitarlo, debe usar hasOwnProperty().

P3. ¿Cuál es el mejor bucle según arrays vs objetos?

• Objetos: Use for…in o Object.keys().
• Arrays: Use for…of o forEach().

3. Próximos pasos｜Temas para aprender más

1. Iterables y objetos iterables:

• Estructuras de datos como Map, Set, WeakMap y WeakSet, y construcciones de bucle para manejarlos.

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

• Uso y ejemplos prácticos de map(), filter() y reduce().

1. Técnicas avanzadas de objetos y arrays:

• Procesamiento de datos usando Object.values() y Object.entries().

1. Características modernas de JavaScript:

• Sintaxis concisa usando características ES6+ como operadores spread y destructuring.

1. Procesamiento asíncrono con Promise / Async / Await:

• Aplicar estos conceptos al procesamiento en tiempo real que involucra obtención de datos y manipulación dinámica de objetos.

4. Conclusión｜Domina el procesamiento de bucles en JavaScript

Este artículo se centró en la sentencia for…in de JavaScript, cubriendo todo desde el uso básico hasta ejemplos avanzados, trampas y enfoques alternativos.

Puntos más importantes:

• La sentencia for…in es adecuada para enumerar propiedades de objetos, pero se deben elegir enfoques alternativos para el procesamiento de arrays o escenarios críticos de rendimiento.
• Para evitar errores y comportamientos inesperados, es esencial seguir siempre las mejores prácticas y medidas de seguridad al escribir código.

¡Pasa al siguiente paso!
Profundiza tu comprensión de los enfoques alternativos y las funciones de orden superior presentadas en este artículo para llevar tus habilidades de JavaScript al siguiente nivel.