Loop for…of do JavaScript Explicado: Sintaxe, Exemplos e Melhores Práticas

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

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

1. Introdução

Ao trabalhar com dados em JavaScript, a repetição é essencial. Para processar dados como arrays e strings em ordem, o JavaScript fornece várias sintaxes de loop. Entre elas, a instrução for…of se destaca como uma opção simples, mas poderosa.

Neste artigo, explicaremos a instrução for…of do JavaScript em detalhes — desde os conceitos básicos até casos de uso mais avançados. Começaremos com exemplos amigáveis para iniciantes e depois cobriremos padrões práticos usados em desenvolvimento intermediário e no mundo real. Após a leitura, você poderá usar a instrução for…of com confiança, sem se prender ao escrever loops.

2. O que é a Instrução for…of do JavaScript? Uso Básico

2.1 Visão Geral da Instrução for…of

A instrução for…of do JavaScript é uma sintaxe que permite iterar por objetos iteráveis de forma limpa e simples. Ela é projetada para lidar eficientemente com estruturas de dados como arrays, strings, Map e Set.

2.2 Sintaxe Básica da Instrução for…of

Use a seguinte sintaxe para processar cada elemento de um objeto iterável em ordem.

for (const element of arrayOrObject) {
  // 반복 처리
}

Essa sintaxe é útil quando você deseja recuperar facilmente cada elemento de um array ou string.

2.3 Exemplos de Código Práticos

Exemplo 1: Exibir elementos de um array em ordem

const fruits = ['Apple', 'Banana', 'Orange'];
for (const fruit of fruits) {
  console.log(fruit);
}

Saída:

Apple  
Banana  
Orange

Exemplo 2: Exibir cada caractere de uma string

const word = 'JavaScript';
for (const char of word) {
  console.log(char);
}

Saída:

J  
a  
v  
a  
S  
c  
r  
i  
p  
t

2.4 Tipos de Dados Suportados

A instrução for…of pode ser usada com os seguintes objetos iteráveis:

1. Arrays (Array)
2. Strings (String)
3. Objetos Map
4. Objetos Set
5. O objeto arguments (um objeto passado como argumentos de função)
6. Objetos NodeList (uma coleção de elementos HTML)

Nota: Você não pode aplicá-la diretamente a literais de objeto (explicaremos a solução alternativa mais adiante).

3. Diferenças e Comparações com Outras Sintaxes de Loop

3.1 Diferenças Entre for…of e for…in

Exemplo: Usando for…in

const obj = { a: 1, b: 2, c: 3 };
for (const key in obj) {
  console.log(key); // a, b, c
}

Nota Importante:
Como o for…in pode enumerar propriedades da cadeia de protótipos também, você deve ter cuidado — especialmente ao iterar por objetos.

3.2 Diferenças Entre for…of e forEach

Exemplo: Usando forEach

const arr = [1, 2, 3];
arr.forEach(num => {
  console.log(num);
});

Nota Importante:
Como o forEach não pode interromper o loop prematuramente, a instrução for…of é recomendada quando o fluxo de controle é importante.

4. Exemplos Práticos e Técnicas Avançadas

4.1 Filtrando um Array

O exemplo a seguir exibe apenas números pares.

const numbers = [1, 2, 3, 4, 5];
for (const num of numbers) {
  if (num % 2 === 0) console.log(num); // Output only even numbers
}

Saída:

2  
4

4.2 Obtendo Chaves e Valores de um Map

Este exemplo mostra como recuperar chaves e valores usando um objeto Map.

const map = new Map([
  ['name', 'Taro'],
  ['age', 25]
]);
for (const [key, value] of map) {
  console.log(`${key}: ${value}`);
}

Saída:

name: Taro  
age: 25

4.3 Combinando com Processamento Assíncrono

A seguir, um exemplo de manipulação de operações assíncronas com a instrução for…of.

const urls = ['url1', 'url2', 'url3'];

async function fetchData() {
  for (const url of urls) {
    const response = await fetch(url);
    const data = await response.json();
    console.log(data);
  }
}
fetchData();

Neste exemplo, cada solicitação de API é executada em ordem, permitindo que você busque dados enquanto preserva a sequência de execução.

.## 5. Notas e Solução de Problemas

5.1 Quando Você Recebe um Erro com Objetos

A declaração for…of não pode ser usada com literais de objeto. Em vez disso, use Object.entries().

Exemplo: Processamento com Object.entries()

const obj = { a: 1, b: 2 };
for (const [key, value] of Object.entries(obj)) {
  console.log(key, value);
}

Saída:

a 1  
b 2

Com esta abordagem, você pode iterar eficientemente pelas chaves e valores de um objeto.

5.2 Considerações de Desempenho

A declaração for…of geralmente oferece desempenho suficiente para casos de uso típicos, mas você deve ter cuidado ao trabalhar com grandes conjuntos de dados. Se necessário, considere usar um loop for baseado em índice ou um loop while.

Exemplo: Loop for baseado em índice

const largeArray = Array(1000000).fill(1);
for (let i = 0; i < largeArray.length; i++) {
  // Performance-focused processing
  console.log(largeArray[i]);
}

5.3 Adicionando Tratamento de Erros

Ao combinar processamento assíncrono com a declaração for…of, certifique‑se de incluir o tratamento de erros adequado.

Exemplo: Tratamento de erros com try…catch

const urls = ['url1', 'url2', 'url3'];

async function fetchData() {
  for (const url of urls) {
    try {
      const response = await fetch(url);
      const data = await response.json();
      console.log(data);
    } catch (error) {
      console.error('An error occurred:', error);
    }
  }
}
fetchData();

6. Seção de Perguntas Frequentes

Q1: A declaração for…of funciona em todos os navegadores?

R1:
A declaração for…of foi introduzida no ES6 (ECMAScript 2015). Ela é suportada nos navegadores modernos, mas não funciona no Internet Explorer.

Navegadores Suportados:

• Google Chrome 38 ou superior
• Firefox 36 ou superior
• Safari 7.1 ou superior
• Edge 12 ou superior

Se precisar suportar navegadores mais antigos, use Babel para transpilar seu código ou escolha outra sintaxe de loop.

Q2: Como posso obter o índice ao usar for…of?

R2:
Com for…of, você não pode acessar diretamente os índices, mas pode usar o método entries() para obter tanto o índice quanto o valor ao mesmo tempo.

Exemplo:

const fruits = ['Apple', 'Banana', 'Orange'];
for (const [index, fruit] of fruits.entries()) {
  console.log(index, fruit);
}

Saída:

0 Apple  
1 Banana  
2 Orange

Q3: Posso usar for…of com literais de objeto?

R3:
Não. A declaração for…of serve apenas para objetos iteráveis. Literais de objeto não são iteráveis, mas você pode iterar pelas chaves e valores usando Object.entries().

Exemplo:

const obj = { a: 1, b: 2 };
for (const [key, value] of Object.entries(obj)) {
  console.log(key, value);
}

Saída:

a 1  
b 2

Q4: Posso usar for…of com operações assíncronas?

R4:
Sim. Você pode usá‑lo junto com async/await.

Exemplo:

const urls = ['url1', 'url2', 'url3'];

async function fetchData() {
  for (const url of urls) {
    const response = await fetch(url);
    const data = await response.json();
    console.log(data);
  }
}
fetchData();

Q5: Qual é a diferença entre for…of e forEach?

R5:
A tabela abaixo resume as diferenças.

7. Resumo

Neste artigo, abordamos os seguintes pontos principais sobre a declaração for…of do JavaScript.

• Como entender a sintaxe básica e exemplos de uso e aplicá‑la na iteração sobre arrays e strings
• As diferenças e melhores casos de uso em comparação com outras sintaxes de loop, como for…in e forEach
• Exemplos avançados incluindo objetos Map e Set, bem como combiná‑los com processamento assíncrono
• Uma seção prática de FAQ para resolver dúvidas comuns

7.1 Benefícios da Declaração for…of

• Simples e altamente legível
• Suporte flexível a objetos iteráveis
• Controle de loop fácil porque suporta break e continue

8. O que aprender a seguir

Depois de dominar a declaração for…of, é uma boa ideia aprender os recursos a seguir como próximo passo.

1. Spread Syntax (…)

• Um recurso útil para expandir e mesclar arrays e objetos.

1. Destructuring Assignment

• Uma técnica para extrair valores de arrays e objetos de forma simples.

1. Promises e async/await em mais detalhes

• Aprenda maneiras eficientes de escrever código assíncrono.

Ao combinar esses recursos, você poderá criar programas JavaScript mais avançados.

Considerações finais

Este artigo forneceu um guia completo sobre a declaração for…of do JavaScript, abordando tudo, desde o básico até casos de uso práticos para desenvolvimento real.

Ações de exemplo para o seu próximo passo:

• Implemente a declaração for…of no seu próprio código e experimente.
• Tente processar arrays, Map e Set para aprofundar seu entendimento.
• Desafie-se com recursos ES6 mais avançados para elevar suas habilidades.