[Dúvida] INCREMENTO E DECREMENTO - FOR - FOR IN E FOR OF

Salve, Levi!

Ter dúvidas faz parte da jornada, e tá tudo bem. Bora trocar uma ideia sobre isso e desmistificar a coisa toda.

Quando falamos de incremento, decremento e laços de repetição (for, for...in, for...of), o erro mais comum é tentar decorar a sintaxe sem entender o movimento do código.

Programação não é sobre símbolos, é sobre fluxo. Vamos construir esse fluxo juntos, vem comigo.

A primeira coisa que você precisa guardar é: computador não pensa, ele só executa instruções em sequência, uma linha de cada vez.

Comecemos pelo mais básico de tudo.

Incrementar e decrementar nada mais é do que alterar um valor numérico guardado em memória.

let contador = 0

Nesse momento, imagine uma caixinha com o número 0 dentro.

Quando fazemos isso:

contador = contador + 1

Estamos dizendo literalmente:

pegue o valor atual do contador e some 1

O operador ++ é apenas uma forma curta de escrever a mesma coisa:

contador++

Se executarmos isso várias vezes, o que acontece é o seguinte:

// contador começa em 0
contador++ -> 1
contador++ -> 2
contador++ -> 3

Nada mágico acontece. É sempre um passo por vez.

O decremento segue exatamente a mesma lógica, só que subtraindo:

contador--

Visualmente:

// contador está em 3
contador-- -> 2
contador-- -> 1
contador-- -> 0

Até aqui, estamos apenas somando e subtraindo números.

O for existe para repetir um bloco de código enquanto uma condição for verdadeira. Ele sempre segue o mesmo formato mental:

comece em algum valor, verifique uma condição, execute o bloco, avance um passo

Assim:

for (let i = 0; i < 5; i++) {
  console.log(i)
}

Vamos ler isso como o computador lê. Primeiro, ele executa a inicialização:

let i = 0

Depois ele verifica a condição:

i < 5

Se for verdadeira, ele entra no bloco:

console.log(i)

Ao sair do bloco, ele executa o incremento:

i++

E então tudo se repete.

Se desenharmos isso como uma execução passo a passo, temos:

i = 0 -> 0 < 5 -> imprime 0 -> i = 1
i = 1 -> 1 < 5 -> imprime 1 -> i = 2
i = 2 -> 2 < 5 -> imprime 2 -> i = 3
i = 3 -> 3 < 5 -> imprime 3 -> i = 4
i = 4 -> 4 < 5 -> imprime 4 -> i = 5
i = 5 -> 5 < 5 -> falso -> para

Perceba que o i++ não é um detalhe. Ele é o que faz o laço avançar. Sem isso, o loop nunca termina.

Agora vamos aplicar isso a algo mais concreto: arrays.

const frutas = ['maçã', 'banana', 'uva']

Arrays são listas. Cada item tem uma posição, começando do zero.

posição 0 -> maçã
posição 1 -> banana
posição 2 -> uva

Quando usamos um for tradicional com array, estamos trabalhando com essas posições:

for (let i = 0; i < frutas.length; i++) {
  console.log(frutas[i])
}

Aqui o que acontece é:

i = 0 -> frutas[0] -> maçã
i = 1 -> frutas[1] -> banana
i = 2 -> frutas[2] -> uva

O i não tem significado especial. Ele é só um número que usamos para acessar posições.

Agora vamos mudar o tipo de laço.

O for...in existe para percorrer chaves, não valores.

Veja um objeto:

const pessoa = {
  nome: 'Levi',
  idade: 25,
  cidade: 'SP'
}

Quando usamos for...in:

for (let chave in pessoa) {
  console.log(chave)
}

O resultado será:

nome
idade
cidade

Se quisermos o valor associado à chave, usamos colchetes:

console.log(pessoa[chave])

Em arrays, o for...in retorna os índices:

for (let indice in frutas) {
  console.log(indice)
}

0
1
2

Por isso dizemos que for...in não é a melhor escolha para arrays quando o objetivo é trabalhar com os valores.

É aí que entra o for...of.

O for...of percorre diretamente os valores da lista.

for (let fruta of frutas) {
  console.log(fruta)
}

Mentalmente, isso acontece assim:

fruta = maçã
fruta = banana
fruta = uva

Note a diferença importante: aqui não existe índice, não existe incremento explícito. O próprio JavaScript cuida do avanço.

Para fechar, guarda essa regra simples:

for       -> quando você precisa de controle total (posição, condição, passo)
for...in  -> quando você precisa das chaves
for...of  -> quando você só quer os valores

Minha sugestão prática: copie esses exemplos, cole no console e execute linha por linha. Mude números, troque valores, quebre o código de propósito e veja o que acontece.

Em programação, entender vem depois de testar várias vezes. O clique sempre acontece.

Manda uma mensagem depois se precisar de ajuda!