Laços de repetição

Saber como trabalhar com laços de repetição é fundamental para nós, desenvolvedores. Neste artigo, você aprenderá como utilizá-los no JavaScript com exemplos práticos, e ao final, apresentarei um desafio para que você possa praticar. Sem mais delongas, vamos começar!

While

O while é bastante simples: ele verifica uma condição e, enquanto essa condição for verdadeira, o bloco de código dentro do while é executado.

let numero = 0;
while(numero < 5) { 
   console.log(numero); 
   numero++;  
}

Neste exemplo, o código exibirá números na console de 0 a 4. Quando atingir 5, a condição verificará se 5 é menor que 5, e como o resultado será falso, o while não será mais executado. No entanto, é importante ter cuidado, especialmente para iniciantes, para não esquecer de incrementar (++) a variável numero, pois isso pode resultar em um loop infinito, travando o navegador.

O while é frequentemente usado quando o número de iterações não é conhecido com antecedência. Um exemplo disso é:

let aceitaTermosUso = false;
while(!aceitaTermosUso) {
 aceitaTermosUso = window.confirm('Você aceita os termos de uso?');
}
console.log('Termos de uso aceito');

Observe que, no segundo exemplo, sair do loop depende apenas da aceitação dos termos de uso, caso contrário, o while continuará em execução.

For

O for pode parecer mais complexo à primeira vista, mas logo você verá que é simples. É ideal quando você sabe quantas vezes algo deve ser repetido. Sua sintaxe é a seguinte: for (inicialização; condição; incremento).

Por exemplo, para imprimir os números de 0 a 4:

for(let i=0;i<5;i++) {
   console.log(i);
}
// 0
// 1
// 2
// 3
// 4

No código acima, estamos obtendo o mesmo resultado do primeiro exemplo com o while. Vamos analisar o que está acontecendo:

A variável i é inicializada com o valor 0;enquanto i menor que 5;a cada interação, i é incrementado em +1. Tudo isso em uma única linha.

Aqui está um exemplo que exibe todas as letras de uma palavra usando o for:

let letras = "hello world".replace(' ', '').split('');
for(let i=0;i<=letras.length;i++) {
   console.log(letras[i]);
}
// h
// e
// l
// l
// o
// w
// o
// r
// l
// d

Mais um exemplo, e esse pode ter certeza, você vai utilizar bastante no seu dia a dia de desenvolvedor, pois é muito comum precisarmos inteirar sobre um array ou array de objetos, e o for é uma ótima opção para fazer isso.

let pessoas = [
  { nome: 'João', idade: 29 }, 
  { nome: 'Maria', idade: 30 }
];

for(let i=0;i<pessoas.length;i++) {
   console.log
    (
        pessoas[i].nome + ' tem ' +
        pessoas[i].idade + ' anos' 
    );
}
// João tem 29 anos
// Maria tem 30 anos

É fundamental observar que você tem a flexibilidade de definir o incremento no for para decrementar ou aumentar em qualquer quantidade desejada, como ilustrado nos exemplos a seguir:

// decrementando 

for(let i=5;i>0;i--) {
   console.log(i);
}
// 5
// 4
// 3
// 2
// 1

// incrementando de 2 em 2

for(let i=0;i<10;i+=2) {
   console.log(i);
}
// 0
// 2
// 4
// 6
// 8

// incrementando de 3 em 3

for(let i=0;i<10;i+=3) {
   console.log(i);
}
// 0
// 3
// 6
// 9

Do While

Com base nas minhas experiências e pelo que já vi de código ao longo da carreira, posso me arriscar a dizer que é o menos utilizado dos laços de repetição. O do while é muito semelhante ao while, com a diferença que o teste lógico ao invés de ser realizado no início, é realizado no final, e isso faz com que o laço de repetição seja executado pelo menos uma única vez.

Exemplo:

let numero = 0;
do { 
   console.log(numero); 
   numero++;  
} while(numero < 5);
// 0
// 1
// 2
// 3
// 4

Agora vamos alterar o código para ver o laço ser executado apenas uma única vez.

let numero = 5;
do { 
   console.log(numero); 
   numero++;  
} while(numero < 5);
// 5

ForEach

Quando trabalhamos com arrays, esse sem dúvida é um laço de repetição que facilita muito.

Observe o mesmo array que usamos com o for, agora sendo utilizado com o forEach.

let pessoas = [
  {nome: 'João', idade: 29}, 
  {nome: 'Maria', idade: 30}
];

pessoas.forEach(function(pessoa){
    console.log(pessoa.nome + ' tem ' + pessoa.idade + ' anos')
});
// João tem 29 anos
// Maria tem 30 anos

Perceba que o forEach passa por cada item do array de uma forma mais simples que o for. O que acontece nesse caso é que para cada item do array, é armazenado na variável pessoa, que é um objeto, e na linha seguinte está sendo exibida as propriedades nome e idade no console.

Desafio

Como prometido, um desafio bem legal para você praticar o conteúdo visto: Utilize os laços de repetição para exibir a tabuada de um determinado número.

Por exemplo, faça a tabuada do 5, onde você vai precisar multiplicar o 5 de 1 até 10.

Caso sinta dificuldades ou queira ver como resolvi esse desafio, pode acessar o vídeo em meu canal do Youtube ou comentar logo abaixo.