JavaScript - 7. Laços e repetições

Quando você precisa fazer algo ser repetido várias e várias vezes em javascript, utilizamos algumas instruções chamadas de laços, que servem para executar determinada ação várias e várias vezes.

Veja um exemplo:

for ( i = 0 ; i < 10 ; i++) {
    console.log("Isto será repetido 10 vezes");
}

Dentro da instrução for, abrimos parênteses e passamos três parâmetros, sendo que os parâmetros são:

1. "i = 0" : Inicializa a variável contadora com o valor zero.
2. "i < 10": Testa a condição verdadeira para continuar a repetição.
3. "i++": O mesmo que i = i + 1 de forma resumida, para incrementar o valor da variável contadora.

Outra forma de fazer isto com outra instrução chamada de while, é da seguinte forma:

i = 0;
while ( i < 10 ) {
  console.log("Isto será repetido 10 vezes.");
  i++;
}

Isto fará a mesma coisa que o item anterior, mas só precisará de um parâmetro, que é o item a ser testado. Todo o restante dos controles, tem que ser feitos por fora ou dentro do laço.

Uma outra forma de fazer o mesmo, de uma forma diferente, usando a instrução do/while, veja o exemplo:

i = 0;
do {
  console.log("Isto será repetido 10 vezes.");
  i++;
}
while ( i < 10 );

Esta é outra forma de escrever, deixando a condição no final.

Break / Continue

Estes elementos existem para que possa haver um melhor controle para a execução da linha de código, caso queira deixar parte do loop.

Repare neste exemplo:

el = document.getElementsByTagName("body")[0];
i = 0, a = 0;
do {
  a++;

  el.innerHTML += a +". Valor de i: "+ i + "<br>";

  if ( i == 3 ) {
    break;
  }

  i++;
}
while ( i < 10 && a < 10);

Resultado:

Quando temos o método break, significa que o código deverá interromper imediatamente a execução do loop ao qual está sendo executado, saindo da iteração atual, sem executar o restante do código, e sem continuar o loop.

Por isto que este código irá realizar 4 iterações, sendo que na quarta, o valor de i será igual a três, executando o break. Mas e se substituir o mesmo por continue, o que ocorreria?

el = document.getElementsByTagName("body")[0];
i = 0, a = 0;
do {
  a++;

  el.innerHTML += a +". Valor de i: "+ i + "<br>";

  if ( i == 3 ) {
    continue;
  }

  i++;
}
while ( i < 10 && a < 10);

Neste caso, a iteração continuou até o valor 10, sem continuar somando o valor de i (i++ irá somar a cada iteração), mantendo o valor de i, e aumentando o valor de a, que é executado no início, ou seja, sempre que houver continue, ele irá deixar de executar todo o restante do código, mas irá seguir para a próxima iteração do laço ou do loop.

O break e continue podem ser usados em instruções como for, do, while, e até mesmo (e é necessário) nas instruções switch, senão outros cases podem ser acionados, ou mesmo o default. Caso não saiba como usar o break em um switch, veja a matéria anterior.