Um loop for...in é melhor usado quando você precisa iterar sobre as propriedades de um objeto. Este loop irá iterar sobre todas as propriedades enumeráveis de um objeto, incluindo propriedades herdadas e propriedades não numéricas. Uma propriedade herdada é uma propriedade que é herdada da cadeia de protótipos do objeto. Uma propriedade não numérica é uma propriedade que não é um número ou uma string que pode ser convertida em um número. Aqui está a sintaxe básica de um loop for...in:

for (variable in object) {
  // code block to be executed
}

A variável no exemplo representa a propriedade atual do objeto que está sendo percorrido. Vamos dar uma olhada em alguns exemplos para que você possa entender melhor como o loop for...in funciona. Neste primeiro exemplo temos um objeto fruit e queremos percorrer cada propriedade e registrar o valor no console.

const fruit = {
  name: 'apple',
  color: 'red',
  price: 0.99
};

for (const prop in fruit) {
  console.log(fruit[prop]);
}

A variável prop representa a propriedade atual do objeto. fruit[prop] é usado para acessar o valor de cada propriedade. Para a primeira iteração, prop será name. Para a segunda iteração, prop será color e assim por diante. Os resultados registrados no console serão apple, red e 0.99. Neste segundo exemplo, temos um objeto aninhado e queremos iterar sobre cada propriedade e registrar o valor no console.

const person = {
  name: 'John',
  age: 30,
  address: {
    street: '123 Main St',
    city: 'Anytown',
    state: 'CA'
  }
};

for (const prop in person) {
  console.log(person[prop]);
}

A propriedade address é um objeto por si só. O loop for...in também percorrerá as propriedades do objeto person e registrará o objeto inteiro address no console. Aqui está como o resultado aparecerá no console:

John
30
{ street: '123 Main St', city: 'Anytown', state: 'CA' }

Se você quiser iterar sobre as propriedades do objeto address, pode aninhar outro loop for...in dentro do primeiro.

const person = {
  name: 'John',
  age: 30,
  address: {
    street: '123 Main St',
    city: 'Anytown',
    state: 'CA'
  }
};

function isObject(obj) {
  return typeof obj === 'object' && !Array.isArray(obj) && obj !== null;
}

for (const prop in person) {
  if (isObject(person[prop])) {
    for (const nestedProp in person[prop]) {
      console.log(person[prop][nestedProp]);
    }
  } else {
    console.log(person[prop]);
  }
}

Neste exemplo, temos uma função personalizada isObject que verifica se o valor é um objeto. O método Array.isArray é usado para verificar se o valor é um array. Ao colocar o operador lógico NOT (!) na frente do método, estamos verificando se o valor não é um array. A razão pela qual não podemos simplesmente usar typeof igual a 'object' é porque arrays também são considerados objetos em JavaScript. Queremos excluir arrays da verificação. Além disso, devido a um bug histórico no JavaScript, typeof null retorna 'object'. Então queremos também excluir valores null da verificação. Se a condição for verdadeira, nós aninhamos outro loop for...in que irá percorrer as propriedades do objeto aninhado e registrar o valor no console. A variável nestedProp representa a propriedade atual do objeto aninhado. Aqui está como o resultado modificado aparecerá no console:

"John"
30
"123 Main St"
"Anytown"
"CA"

Um loop for...in é útil quando você precisa iterar sobre as propriedades de um objeto. Não é recomendado usar um loop for...in para iterar sobre os elementos de um array. Em vez disso, use um loop for...of ou outros métodos de array como forEach, map, filter e reduce, que você aprenderá nas próximas lições.