Laços de Repetição - For Loop e While Loop

Chegamos a mais um post da minha saga de estudos em JavaScript.

No post de hoje irei falar sobre laços de repetição, mais precisamente sobre o loop for e o loop while.

O propósito de um loop é executar um pedaço de código, repetidas vezes, percorrendo pelos dados diversas vezes.

O nome técnico para a ação de percorrer pelos dados várias vezes é iterar.

For Loop

O for loop é o mais comum de se ver.

Sua sintaxe é bem simples, vou explicar detalhes abaixo:

O loop for, recebe como argumento 3 informações.

1: A variável com o valor inicial, por convenção chamamos ela de i.
2: A condição a ser verificada, se a condição resultar em verdadeiro true, o bloco de código dentro do loop será executado e passaremos para o terceiro argumento, caso resulte em falso false, o código de bloco não será executado e o loop será encerrado.
3: É a incrementação da variável com o valor inicial.

for (let i = 0; i < 5; i++) {
  console.log(`Dentro do loop: ${i}`)
}

// Output

0
1
2
3
4

No código acima, nós temos o valor 0 como inicial na variável i, a condição que deve ser verificada é que o valor de i deve ser menor que 5, se o valor de i for menor que 5 o bloco de código dentro do loop será rodado e em seguida a variável i será incrementada, recebendo agora o valor 1 e assim por diante, até que a condição resulte em false.

Vale ressaltar que geralmente não saberemos quantas vezes o loop irá iterar pelos dados.

Vamos imaginar que iremos receber um array de usuários, através de uma consulta ao nosso banco de dados.

Não será possível e pouco produtivo, contar quantos itens o array possui para colocar na verificação da condição.

No exemplo abaixo, vamos garantir que iremos percorrer todos os itens do array, independente do tamanho dele, iremos nos aproveitar da propriedade length que nos retorna quantos itens um array possui, e o bloco de código dentro do loop irá imprimir no console todos os itens do array.

const names = ['Fernando', 'Juliana', 'Gabriel', 'Manoela']

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

// Output

Fernando
Juliana
Gabriel
Manoela

Agora outra situação bastante comum é ao invés de imprimirmos no console o resultado, iremos gerar templates HTML com o resultado.

const names = ['Fernando', 'Juliana', 'Gabriel', 'Manoela']

for (let i= 0; i < names.length; i++) {
  const HTMLTemplate = `<p>${names[i]}</p>`
  console.log(HTMLTemplate)
}

// Output

<p>Fernando</p>
<p>Juliana</p>
<p>Gabriel</p>
<p>Manoela</p>

O bloco de código irá pegar cada item do array e colocar dentro de um template HTML, contendo uma tag de parágrafo e o nome como seu conteúdo.

While Loop

O while loop faz exatamente a mesma coisa que o For loop, que é executar um determinado bloco de código um determinado número de vezes.

O while loop é bem pouco usado, mas é bom sabermos que ele existe.

A única diferença entre os dois loops, é a sintaxe, a forma como escrevemos eles.

Diferentemente do for loop, o while recebe apenas um argumento, que é a condicional para executar ou não o bloco de código dentro dele.

A variável de inicialização ainda precisa existir, mas fica fora do while.

O incremento deve ser informado dentro do bloco de código que será executado caso a condição inserida retorne true.

Abaixo irei usar o while exatamente da mesma forma que usei o for acima, para imprimir no console os números de 0 a 4.

let i = 0

while (i < 5) {
  console.log(`Dentro do While Loop: ${i}`)
  i++
}

// Output

0
1
2
3
4

Um ponto extremamente importante, caso o incremento i++ seja esquecido, nós iremos entrar num loop infinito e consequentemente, iremos travar nosso navegador, se atentem a isso.

Agora iremos usar o while loop para iterar sobre o mesmo array utilizado nos exemplos do for loop.

const names = ['Jobs', 'Hooper', 'Dominic', 'Edgard']

let i = 0

while (i < names.length) {
  console.log(`Dentro do Array de Names: ${names[i]}`)
  i++
}

// Output

Dentro do Array de Names: Jobs
Dentro do Array de Names: Hooper
Dentro do Array de Names: Dominic
Dentro do Array de Names: Edgard