El bucle for...in en JavaScript

El bucle for..in itera a través de las propiedades de un objeto en JavaScript. Proporciona una sintaxis muy limpia y concisa para iterar sobre enumerables (como objetos literales, matrices y cadenas) y todos los demás tipos de propiedades iterables.

Cómo for...in Trabajos en bucle

for (const key in object) {
    // do something
}

El key es el nombre de la variable a la que se le asigna un nombre de propiedad diferente en cada iteración. El object es el iterable real (objetos literales, matriz, cadenas) sobre el que está recorriendo. El bloque de código dentro del bucle se ejecuta una vez para cada propiedad.

Puedes usar el key para obtener el valor de la propiedad del objeto.

Aquí hay un ejemplo:

const user = {
    name: 'John Doe',
    email: '[email protected]',
    age: 25,
    admin: false
};

for (const key in user) {
    console.log(key); // property name
    console.log(user[key]); // property value
}

for...in Ejemplos de bucles

Veamos algunos ejemplos más. El for...in el bucle siguiente itera a través de las propiedades de un objeto literal y registra una cadena de nombres de propiedades y sus valores:

const animals = {
    tiger: '🐅',
    cat: '🐱',
    monkey: '🐒',
    horse: '🐴',
    elephant: '🐘'
};


for (const key in animals) {
    console.log(`${key} --> ${animals[key]}`);
}

// tiger --> 🐅
// cat --> 🐱
// monkey --> 🐒
// horse --> 🐴
// elephant --> 🐘

También puedes usar for...in para recorrer una matriz o una cadena usando sus valores de índice:

const str = 'JavaScript Loops';

for (const index in str) {
    console.log(`${str[index]} is at ${index} index.`);
}

// J is at 0 index.
// a is at 1 index.
// v is at 2 index.
// a is at 3 index.
// ...

for...in Bucle y Prototipos

Los objetos en JavaScript pueden tener muchas propiedades que se heredan de los prototipos de objetos. Por ejemplo, objetos creados usando Array y Object los constructores heredan muchas propiedades de Object.prototype y String.prototype . El for...in loop iterará las propiedades generales del objeto en sí mismo y aquellas que el objeto hereda del prototipo de su constructor.

Pongamos un ejemplo para entender esta herencia:

function Animal(name, icon) {
    this.name = name;
    this.icon = icon;
};

const cat = new Animal('Cat', '🐱');

Animal.prototype.color = 'White';

for (const prop in cat) {
    console.log(`Aminal ${prop} is ${cat[prop]}.`);
}

// Aminal name is Cat.
// Aminal icon is 🐱.
// Aminal color is White.

El color del animal es parte del prototipo, y no el objeto real cat , pero se devuelve de todos modos. Si solo está interesado en las propiedades que se adjuntan al objeto en sí y no en sus prototipos, use hasOwnProperty() método para asegurarse de que la clave es una propiedad del objeto real:

for (const prop in cat) {
    if (cat.hasOwnProperty(prop)) {
        console.log(`Aminal ${prop} is ${cat[prop]}.`);
    }
}

Compatibilidad del navegador

El for...in loop funciona perfectamente en todos los navegadores modernos, incluido Internet Explorer 6 y superior.