Entenda como funcionam o for...in e o for...of em JavaScript

Como funciona o for...in e o for...of?

Em JavaScript, existem várias maneiras de iterar sobre coleções de dados, como arrays e objetos. Dois desses métodos são o for...in e o for...of, que são usados para percorrer elementos em objetos e arrays, mas de maneiras diferentes.

O Loop for...in

O loop for...in é utilizado para iterar sobre as propriedades de um objeto ou os índices de um array. Ele percorre as chaves do objeto ou os índices do array e permite que você acesse cada um dos valores ou elementos com base nessas chaves ou índices.

Exemplo de código com for...in:

let pessoa = { nome: 'Ana', idade: 25, cidade: 'São Paulo' };
for (let chave in pessoa) {
  console.log(chave + ': ' + pessoa[chave]);
}

Neste exemplo, o for...in percorre as chaves do objeto pessoa (como nome, idade e cidade) e, para cada chave, exibe a chave e o valor correspondente.

O Loop for...of

O loop for...of foi introduzido no ECMAScript 6 (ES6) e é usado para iterar sobre valores em arrays e objetos iteráveis (como String, Map, Set, etc.). Diferente do for...in, o for...of percorre os valores dos elementos e não as chaves ou índices.

Exemplo de código com for...of:

let numeros = [1, 2, 3, 4, 5];
for (let numero of numeros) {
  console.log(numero);
}

Neste exemplo, o for...of percorre os valores do array numeros e exibe cada número no console.

Diferenças entre for...in e for...of

• for...in é usado para iterar sobre propriedades de objetos ou índices de arrays.
• for...of é usado para iterar sobre valores de arrays ou objetos iteráveis.

Quando usar cada um?

• Use for...in quando precisar iterar sobre as chaves de um objeto ou os índices de um array.
• Use for...of quando quiser percorrer os valores diretamente em arrays ou objetos iteráveis, como strings ou mapas.

Conclusão

Entender a diferença entre for...in e for...of é essencial para escolher a melhor opção de iteração dependendo do tipo de dado que você está manipulando. O for...in é útil para acessar propriedades e índices, enquanto o for...of facilita a iteração direta sobre os valores.

Entenda as diferenças e os usos do for...in e for...of em JavaScript

O for...in e o for...of são dois dos loops mais poderosos em JavaScript, mas possuem finalidades diferentes. Saber quando usar cada um é essencial para escrever código mais eficiente e legível. Em geral, o for...in é útil para objetos, onde você precisa acessar as chaves das propriedades. O for...of, por outro lado, é ideal quando você está trabalhando com arrays ou outros tipos iteráveis, permitindo que você acesse diretamente os valores. Ambos são flexíveis e, com um bom entendimento, podem ser usados para resolver diversos problemas de iteração de forma concisa.

Algumas aplicações:

• Iteração sobre objetos para acessar suas propriedades.
• Iteração sobre arrays para acessar seus elementos.
• Trabalhar com dados de objetos iteráveis, como Map e Set.
• Usar em situações que exigem iteração dinâmica em coleções de dados, como filtragem ou processamento de elementos.

Dicas para quem está começando

• Use for...in apenas quando você precisar acessar as chaves ou índices de um array ou objeto.
• Quando estiver lidando com arrays ou objetos iteráveis, prefira for...of para acessar diretamente os valores.
• Evite o uso de for...in em arrays se você precisar acessar os valores diretamente, pois pode levar a resultados inesperados ao iterar sobre as propriedades do objeto.
• Pratique iterar com ambos os loops em pequenos projetos para aprender as diferenças e quando usar cada um.

Compartilhe este tutorial