for...of: percorrendo listas

O jeito mais limpo e legível de fazer algo com cada item de uma coleção, sem precisar controlar contador nenhum.

Chegamos ao loop mais elegante dos três, e ele resolve uma tarefa muito comum: passar por cada item de uma lista. Uma pequena antecipação aqui: uma lista (o nome técnico é array) é uma coleção de valores em sequência, como ["maçã", "banana", "uva"]. Elas ganham um módulo inteiro só para si mais adiante; por ora, basta saber que é uma fila de itens.

Você poderia percorrer essa fila com um for comum, usando o contador como posição. Mas é trabalhoso e fácil de errar (aquela história do "começa no zero"). O for...of foi feito exatamente para varrer esse tipo de complicação para debaixo do tapete: você lê como português, "para cada fruta na lista de frutas", e ele te entrega os itens um a um, sem você tocar em índice nenhum:

// for...of percorre cada item de uma lista, um por um.
const frutas = ["maçã", "banana", "uva"];

for (const fruta of frutas) {
  console.log("Eu gosto de " + fruta);
}

Compare mentalmente com o for tradicional: não há i = 0, não há i < frutas.length, não há frutas[i]. Some tudo isso e sobra só a intenção, "faça algo com cada fruta". É por isso que, quando a tarefa é simplesmente visitar cada item, o for...of costuma ser a melhor escolha: menos peças móveis, menos bugs, mais legível.

for...of não é for...in

Existe um irmão parecido, o for...in, e a troca de uma letra muda tudo: o for...of entrega os valores da lista, enquanto o for...in entrega as chaves, que num array são os índices, e ainda por cima como texto ("0", "1", não os números 0 e 1). Para percorrer uma lista, use sempre for...of. O for...in existe para percorrer as chaves de um objeto, mas em listas só atrapalha.

Sair antes ou pular uma volta: break e continue

Os mesmos dois comandos da lição do while funcionam aqui: break encerra o laço na hora (útil quando você já achou o que procurava na lista) e continue pula só a volta atual. Procurar o primeiro item que satisfaz uma condição e parar ali, em vez de percorrer a lista inteira à toa, é um dos usos mais comuns do break.

// Sua vez! Some todos os preços do carrinho.
const precos = [30, 25, 15, 20];
let total = 0;

// Percorra os preços com for...of e some cada um em 'total':
// (crie o for...of aqui)

console.log("Total: " + total); // deve dar 90

Some os preços do carrinho e clique em Rodar.

← Voltar ao índice do curso