Loop for…in do JavaScript Explicado: Sintaxe, Casos de Uso e Melhores Práticas

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

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

1. Introdução｜Que Problemas a Instrução for…in Pode Resolver?

JavaScript é uma das linguagens de programação mais usadas no desenvolvimento web. Entre suas diversas funcionalidades, laços de repetição são essenciais para processar dados de forma repetida.
Em particular, a instrução for…in é útil para iterar sobre as propriedades de um objeto.

Objetivo deste Artigo

Neste artigo, abordaremos os seguintes pontos em detalhe:

• Sintaxe básica e uso do laço for…in em JavaScript
• Cuidados ao utilizá‑lo com arrays
• Diferenças em relação a outras construções de loop (for…of e forEach)
• Erros comuns e como corrigi‑los

O que Você Vai Aprender

• Como processar eficientemente propriedades de objetos e elementos de arrays
• Cuidados e uso seguro da instrução for…in
• Exemplos práticos de código e comparações de desempenho

Este artigo está estruturado para fornecer conhecimento útil tanto para iniciantes quanto para desenvolvedores JavaScript de nível intermediário.
Vamos começar na próxima seção com o básico da instrução for…in.

2. O que é a Instrução for…in do JavaScript?【Explicação Básica】

Em JavaScript, a instrução for…in é usada para iterar sobre as propriedades de um objeto. Essa sintaxe é particularmente adequada para objetos, permitindo que você processe cada nome de propriedade (chave) um por um.

Sintaxe Básica

Aqui está a sintaxe básica do laço for…in:

for (variable in object) {
  // Repeated processing
}

Explicação dos Parâmetros:

• variável : Armazena o nome da propriedade atual (chave).
• objeto : O objeto alvo que você deseja percorrer.

Exemplo de Uso: Enumerando Propriedades de um Objeto

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

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

Saída:

name: Taro
age: 25
city: Tokyo

Atenção: Ordem das Propriedades Enumeradas

A ordem das propriedades no laço for…in não é garantida. De acordo com as especificações do JavaScript, a ordem pode não corresponder à ordem de inserção quando as chaves são strings. Se precisar de ordem estrita, use alternativas como Object.keys().

Resumo das Características

1. Recupera facilmente as chaves do objeto: Útil ao acessar dinamicamente nomes de propriedades.
2. Só propriedades enumeráveis são alvo: Propriedades não enumeráveis (enumerable: false) são excluídas.
3. Propriedades herdadas pelo protótipo também são enumeradas: Isso pode causar problemas, que serão explicados na próxima seção.

3. Arrays e a Instrução for…in｜Pontos‑ave a Observar

A instrução for…in do JavaScript foi projetada para enumerar propriedades de objetos, mas também pode ser usada com arrays, há várias armadilhas ao aplicá‑la a arrays. Vamos examinar seu comportamento e as armadilhas em detalhe.

Comportamento Básico com Arrays

Considere o exemplo a seguir:

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

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

Saída:

0 Apple  
1 Banana  
2 Orange

Atenção 1: Propriedades do Protótipo Podem Ser Enumeradas

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

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

Saída:

0 Apple  
1 Banana  
2 Orange  
newMethod undefined

Solução:

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

Atenção 2: A Ordem Não é Garantida

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

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

Saída:

1 Banana  
5 Orange  
10 Apple

Atenção 3: Índices São Tratados como Strings

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

Solução:

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

Resumo

• A instrução for…in é mais adequada para objetos do que para arrays.
• Para ordem e manipulação de índices numéricos, recomenda‑se for…of ou um loop for tradicional.

4. Diferenças entre for…in e for…of【Tabela de Comparação】

Em JavaScript, tanto for…in quanto for…of estão disponíveis para iteração, mas seus casos de uso e comportamento diferem.

Comparação de Sintaxe

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
}

Tabela de Comparação

Exemplo Prático｜Manipulação de Array

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'
}

Resumo

• for…in: Melhor para manipular chaves de objetos.
• for…of: Melhor para arrays e objetos iteráveis.

5. Uso Prático: Aplicações e Boas Práticas da Instrução for…in

Aqui, exploraremos aplicações práticas da instrução for…in do JavaScript e apresentaremos boas práticas úteis no desenvolvimento real.

1. Exemplo 1｜Filtrando Propriedades de Objetos

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

Saída:

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

2. Exemplo 2｜Processando Objetos Aninhados

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

**Saída:“` name: Sato age: 28 city: Osaka

### 3. Boa Prática｜Excluindo Propriedades do Protótipo

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

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

**Saída:**

a: 1 b: 2

### Resumo

* Introduzimos casos de uso adequados para filtragem e manipulação de objetos aninhados.
* Use **hasOwnProperty()** para impedir que propriedades herdadas do protótipo sejam enumeradas.



## 6. Erros Comuns e Soluções com for…in【Para Iniciantes】

### 1. Exemplo de Erro 1｜Propriedades do Protótipo São Enumeradas

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

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

**Saída:**

a 1 b 2 c 3

**Solução:**

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

### 2. Exemplo de Erro 2｜Usando for…in com Arrays

const arr = [10, 20, 30]; Array.prototype.extra = “Additional Data”;

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

**Saída:**

0 10 1 20 2 30 extra undefined

**Solução:**

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

### 3. Exemplo de Erro 3｜Manipulando Valores Undefined

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

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

**Solução:**

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

### Resumo

* **Problemas com Propriedades do Protótipo:** Use hasOwnProperty().
* **Manipulação de Arrays:** Prefira for…of ou forEach em vez de for…in.
* **Valores Undefined:** Atribua valores padrão com o operador de coalescência nula ( `??` ).

## 7. Teste de Desempenho e Alternativas ao for…in

### 1. Comparação de Desempenho

**instrução 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. Resultado da Comparação de Exemplo

for…in: 0.015ms Object.keys: 0.005ms “`

3. Alternativas Recomendadas

• Manipulação de Objetos: Prefira Object.keys() para melhor desempenho e segurança.
• Manipulação de Arrays: Use for…of ou forEach para iteração mais rápida e confiável.

Resumo

• A instrução for…in é conveniente, mas escolha a construção de loop mais apropriada considerando desempenho e segurança.

8. Conclusão｜Entendendo a Instrução for…in e Próximos Passos

1. Principais Pontos

1. Sintaxe Básica e Uso do for…in:

• Usado para iterar sobre nomes de propriedades de objetos.
• Especializado para chaves de objetos, não para arrays.

1. Cuidados ao Usar com Arrays:

• A ordem não é garantida, e propriedades da cadeia de protótipos podem ser incluídas.
• Para arrays, use for…of ou forEach() em vez disso.

1. Diferenças entre for…in e for…of:

• for…in: Itera nomes de propriedades (chaves).
• for…of: Itera valores reais de arrays ou objetos iteráveis.

1. Aplicações Práticas e Melhores Práticas:

• Manipulação de objetos aninhados com recursão.
• Excluindo herança de protótipo com hasOwnProperty().
• Melhorando desempenho e segurança com Object.keys() ou Object.entries().

1. Otimização de Desempenho:

• Object.keys() + forEach() é recomendado para garantir ordem e eficiência, tornando-se uma alternativa mais segura ao for…in.

2. Respostas às Perguntas Frequentes

Q1.vo evitar usar a instrução for…in?

• R: É adequado para enumerar propriedades de objetos, mas para arrays ou tarefas críticas de desempenho, for…of ou Object.keys() são mais seguros e eficientes.

Q2. As propriedades do protótipo serão sempre enumeradas?

• R: Sim. Por especificação, propriedades herdadas do protótipo também são incluídas. Use hasOwnProperty() para evitar esse problema.

Q3. Qual é o melhor loop dependendo de arrays vs. objetos?

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

3. Próximos Passos｜O Que Aprender a Seguir

1. Iteráveis e Objetos Iteráveis:

• Estruturas de dados como Map, Set, WeakMap, WeakSet e os loops para manipulá-las.

1. Funções de Ordem Superior para Manipulação de Dados:

• Uso prático de map(), filter(), reduce().

1. Técnicas Avançadas de Objetos e Arrays:

• Usando Object.values() e Object.entries() para processamento eficiente de dados.

1. Recursos Modernos do JavaScript:

• Recursos ES6+ como o operador spread e desestruturação para um código mais limpo.

1. Programação Assíncrona com Promise/Async/Await:

• Aplique loops em processamento em tempo real, como busca de dados e manipulação dinâmica de objetos.

4. Considerações Finais｜Dominando Loops em JavaScript

Neste artigo, focamos na instrução for…in do JavaScript, cobrindo seu uso básico, aplicações avançadas, armadilhas e alternativas.

Pontos mais importantes:

• for…in é ideal para enumerar propriedades de objetos, mas para arrays ou tarefas focadas em desempenho, outras abordagens devem ser usadas.
• Sempre siga as melhores práticas e medidas de segurança para evitar erros e comportamentos inesperados no seu código.

Próximo Passo! Aprofunde sua compreensão de métodos alternativos e funções de ordem superior para levar suas habilidades em JavaScript ao próximo nível.