Declaração for…in do JavaScript Explicada: Sintaxe, Armadilhas e Boas Práticas

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

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

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

JavaScript é uma das linguagens de programação mais amplamente usadas no desenvolvimento web. Entre suas diversas funcionalidades, o processamento de loops é essencial para manipular dados repetidamente.

Em particular, o statement for…in é útil ao iterar sobre as propriedades de um objeto.

Objetivo deste Artigo

Este artigo explica detalhadamente os seguintes pontos:

• A sintaxe básica e o uso do statement for…in do JavaScript
• Considerações importantes ao utilizá‑lo com arrays
• Diferenças em relação a outras construções de loop, como for…of e forEach
• Erros comuns e suas soluções

O que Você Vai Aprender com Este Artigo

• Como processar eficientemente propriedades de objetos e elementos de arrays
• Precauções e padrões de uso seguro para o statement for…in
• Exemplos práticos de código e comparações de desempenho

Este artigo está estruturado para ajudar desenvolvedores iniciantes a intermediários de JavaScript a adquirir conhecimento prático que pode ser aplicado em projetos reais.

Agora, vamos analisar mais de perto os fundamentos do statement for…in na próxima seção.

2. O que é o statement for…in do JavaScript? [Basic Explanation]

Em JavaScript, o statement for…in é usado 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

A seguir está a sintaxe básica do statement for…in.

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

Descrição dos Parâmetros:

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

Exemplo: 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

Observação Importante: Ordem das Propriedades Enumeradas

Com o statement for…in, a ordem das propriedades não é garantida. De acordo com a especificação do JavaScript, quando as chaves são strings, elas não são necessariamente processadas na ordem em que foram adicionadas. Se você precisar de uma ordem estrita, deve usar outras abordagens, como Object.keys().

Características Principais

1. Acesso fácil às chaves do objeto: É útil quando você precisa obter dinamicamente os nomes das propriedades de um objeto.
2. Apenas propriedades enumeráveis são incluídas: Propriedades não enumeráveis (enumerable: false) são excluídas.
3. Propriedades herdadas do protótipo também são enumeradas: Isso pode causar problemas, que serão explicados em detalhes na próxima seção.

3. Arrays e o statement for…in｜Pontos Importantes a Observar

O statement for…in em JavaScript foi projetado para enumerar propriedades de objetos, mas também pode ser usado com arrays. Contudo, ao aplicá‑lo a arrays, existem várias armadilhas importantes. Esta seção explica seu comportamento e as possíveis 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

Cuidado 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]);
  }
}

Cuidado 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

Cuidado 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.
• Quando a ordem ou índices numéricos são importantes, for…of ou um loop for padrão é recomendado.

4. Diferenças Entre as Instruções for…in e for…of [With Comparison Table]

Em JavaScript, tanto a instrução for…in quanto a for…of são usadas para iteração, mas seus propósitos e comportamentos diferem significativamente.

Comparação de Sintaxe 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
}

Tabela de Comparação

Exemplo Prático｜Diferenças no Processamento de Arrays

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: Mais adequado para processar chaves de objetos.
• for…of: Ideal para arrays e objetos iteráveis.

5. Exemplos Práticos: Uso Avançado e Boas Práticas para a Instrução for…in

Esta seção apresenta exemplos avançados usando a instrução for…in do JavaScript, juntamente com 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

• Apresentamos casos de uso eficazes para filtragem de objetos e processamento de objetos aninhados.
• Use hasOwnProperty() para evitar problemas causados pela herança de protótipos.

6. Erros Comuns com a Instrução for…in e Como Corrigi‑los [Beginner-Friendly]

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 de propriedades do protótipo: Use hasOwnProperty().
• Processamento de arrays: Prefer for…of or forEach.
• Manipulação de valores indefinidos: Assign default values.

7. Teste de Desempenho da Declaração for…in e Abordagens Alternativas

1. Comparação de Desempenho

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

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

3. Abordagens Recomendadas

• Processamento de objetos: Object.keys() is recommended.
• Processamento de arrays: for…of or forEach is faster and safer.

Resumo

• A declaração for…in é conveniente, mas você deve escolher a sintaxe apropriada com base nos requisitos de desempenho e segurança.

8. Resumo｜Entendendo a Declaração for…in e os Próximos Passos

1. Principais Pontos deste Artigo

1. Sintaxe básica e propósito da declaração for…in:

• Usada para iterar sobre os nomes das propriedades de um objeto.
• Especializada para processar chaves de objetos em vez de arrays.

2. Considerações importantes ao usar com arrays:

• A ordem não é garantida, e propriedades da cadeia de protótipos podem ser enumeradas.
• Para o processamento de arrays, for…of ou forEach() é recomendado.

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

• for…in: Enumera nomes de propriedades (chaves).
• for…of: Processa diretamente os valores de arrays e objetos iteráveis.

4. Uso avançado e boas práticas:

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

5. Otimização de desempenho:

• Object.keys() + forEach() é recomendado como alternativa ao for…in porque garante ordem e oferece melhor desempenho.

2. Respostas às Perguntas Frequentes

Q1. A declaração for…in deve ser evitada?

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

Q2. O problema de enumeração de propriedades do protótipo ocorre sempre?

• R: Sim. Pela especificação, propriedades herdadas do protótipo são incluídas. Para evitar isso, você deve usar hasOwnProperty() .

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｜Tópicos para Aprender Mais

1. Iteráveis e objetos iteráveis:

• Estruturas de dados como Map, Set, WeakMap e WeakSet, e construções de loop para manipulá-las.

2. Manipulação de dados com funções de ordem superior:

• Uso e exemplos práticos de map(), filter() e reduce() .

3. Técnicas avançadas de objetos e arrays:

• Processamento de dados usando Object.values() e Object.entries() .

4. Recursos modernos do JavaScript:

• Sintaxe concisa usando recursos ES6+ como operadores spread e destructuring .

5. Processamento assíncrono com Promise / Async / Await:

• Aplicando esses conceitos ao processamento em tempo real envolvendo busca de dados e manipulação dinâmica de objetos.

4. Conclusão｜Domine o Processamento de Loops em JavaScript

Este artigo focou na declaração for…in do JavaScript, cobrindo tudo desde o uso básico até exemplos avançados, armadilhas e abordagens alternativas.

Most Important Points:

• A instrução for…in é bem adequada para enumerar propriedades de objetos, mas abordagens alternativas devem ser escolhidas para o processamento de arrays ou cenários críticos de desempenho.
• Para evitar erros e comportamentos inesperados, é essencial sempre seguir as melhores práticas e medidas de segurança ao escrever código.

Avance para o Próximo Passo!
Aprofunde sua compreensão das abordagens alternativas e das funções de ordem superior apresentadas neste artigo para levar suas habilidades em JavaScript ao próximo nível.