Laços de Repetição - For Loop e While Loop
Published: 2021-03-12 21:59:07

Chegamos a mais um post da minha [saga de estudos](https://dev.to/inando85/bem-vindo-de-novo-javascript-1b48) 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.

```js
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.

```js
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.

```js
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.

```js
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.

```js
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
```

Vou deixar links para saberem mais sobre [For Loop](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for) e sobre o [While Loop](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/while).

Chegamos ao fim de mais um conteúdo de JavaScript Vanilla, espero que estejam curtindo ler, assim como eu estou adorando escreve-los.

________________________________________________________________

Esse foi mais um post da minha saga de estudos em JavaScript Vanilla. Espero que estejam gostando!

Qualquer dúvida ou sugestão, vocês me encontram nas minhas redes sociais:

[LinkedIn](https://linkedin.com/in/inando85)
[GIthub](https://github.com/inando85)
[Twitter](https://twitter.com/inando85)