Repetição: for, for...in e for...of

O que é o for?

Outra estrutura de repetição. No while, o início, a condição e o passo ficam espalhados. No for, os três ficam juntos numa linha, separados por ;.

for (início; condição; passo) {
  instrução;
}

• início: roda uma vez só, antes de tudo (let i = 1).
• condição: testada antes de cada rodada, como no while (i <= 10).
• passo: roda no fim de cada rodada (i++).

Por costume, a contadora do for se chama i (de índice).

for x while: o mesmo laço

Os dois códigos abaixo fazem exatamente a mesma coisa.

// while
let i = 1;              // início
while (i <= 10) {       // condição
  console.log(i);
  i++;                  // passo
}

// for
for (let i = 1; i <= 10; i++) {
  console.log(i);
}

Use o for quando você já sabe quantas vezes vai repetir (de 1 a 10, as 4 notas...). Use o while quando depende de algo que muda no caminho (repetir até o usuário digitar certo).

Exemplo 1: contar e somar

O mesmo exemplo da página de repetição, agora com for. A soma continua sendo a acumuladora; o i é a contadora.

let soma = 0;

for (let i = 1; i <= 10; i++) {
  console.log(i);
  soma += i;
}

console.log("O somatório é: " + soma); // 55

Código desta seção: js/for.js, seção 1.

Exemplo 2: tabuada

O i vai de 1 a 10 e cada rodada monta uma linha da tabuada.

for (let i = 1; i <= 10; i++) {
  console.log(numero + " x " + i + " = " + numero * i);
}

Código desta seção: js/for.js, seção 2.

Exemplo 3: contagem regressiva

O for também anda para trás: começa alto, a condição vira >= e o passo vira i--.

for (let i = 10; i >= 1; i--) {
  console.log(i);
}
console.log("Fogo!");

Cuidado: com i++ aqui, o i só aumenta, a condição i >= 1 nunca fica falsa e vira loop infinito.

Código desta seção: js/for.js, seção 3.

Exemplo 4: for...in (percorrer um objeto)

Objeto é um "pacote" de informações com nome, entre { }: cada linha é propriedade: valor. Ele representa uma coisa do mundo real, como uma pessoa.

// Variável: 1 nome, 1 valor
const nome = "pedruxo";
const nota = 1;

// Objeto: 1 nome, vários valores juntos
const pessoa = {
  nome: "pedruxo",
  telefone: "(55) 9 8888-4321",
  endereco: "ABC"
};

console.log(pessoa.nome);     // "pedruxo"  (ponto + nome da propriedade)
console.log(pessoa["nome"]);  // "pedruxo"  (mesma coisa, com colchetes)

Com o objeto pronto, o for...in passa por cada propriedade sozinho:

const pessoa = {
  nome: "pedruxo",
  telefone: "(55) 9 8888-4321",
  endereco: "ABC"
};

for (let atributo in pessoa) {
  console.log(atributo + " -> " + pessoa[atributo]);
}

• O for...in passa pelo nome de cada propriedade: nome, telefone, endereco.
• Para pegar o valor, use colchetes: pessoa[atributo]. Com o nome fixo, dá para usar ponto: pessoa.nome.
• Não precisa de contador, condição nem passo: o JS sabe quantas propriedades existem.

Código desta seção: js/for.js, seção 4.

Exemplo 5: for...of (percorrer um array)

Array (ou vetor) é uma lista de valores entre [ ]. Cada valor tem uma posição, o índice, que começa em 0. Arrays são o assunto da próxima unidade.

const carros = ["Gol", "Fusca", "Virtus", "Ka"];

for (let carro of carros) {
  console.log(carro);
}

console.log(carros[0]); // "Gol": o primeiro fica na posição 0

O for...of passa pelo valor de cada item e sempre percorre a lista inteira, sem você controlar tamanho ou condição.

Código desta seção: js/for.js, seção 5.

Exemplo 6: for...of com texto

Um texto (string) também é uma sequência: o for...of pega uma letra por rodada. O espaço também conta.

const curso = "Gran Cursos";

for (let letra of curso) {
  console.log(letra);
}

Código desta seção: js/for.js, seção 6.

in ou of?

Para lembrar: in = nomes que estão dentro do objeto; of = cada valor da lista.