Instruções BREAK e CONTINUE em Laços

Neste tutorial de JS, vamos aprender sobre as instruções BREAK e CONTINUE, o que são, para que servem e como utilizá-las em laços.

Estudar pela apostila em PDF

Instrução break em Laços

Já estudamos a instrução break no teste condicional SWITCH, e vimos que ela serve para interromper o que viria depois da instrução.

Em laços, como FOR, WHILE e DO WHILE, é a mesma coisa.

Do inglês quebrar, a instrução break quando usava em um laço, faz ele parar imediatamente.

Não importa em qual iteração esteja, se no começo, meio ou fim do looping, se o JS encontra um break ele simplesmente acaba com o laço, não executa mais e segue no código.

Exemplo de uso da instrução break

Crie um script em JS que imprime numa página HTML todos os números de 1 até o primeiro número que múltiplo de 11 e 13 ao mesmo tempo.

Veja bem, não sabemos que número é esse, então não sabemos até onde nosso laço vai rodar.

O que devemos fazer é com que o laço tenha seu teste sempre verdadeiro

Código HTML:

<!DOCTYPE html>
<html>
 <head>
    <title>Apostila JavaScript Progressivo</title>
    <script type="text/javascript" src="script.js"></script>
 </head>
 <body>
	<button onclick="teste()">Buscar</button><br />
	Resultado: <div id="resposta">
 </body>
</html>

Código .js:

function teste(){
  var resposta = document.getElementById('resposta');
  var texto='';

  for(var count=1 ; true ; count++){
  	if(count%11==0 && count%13==0){
  		texto+=count;
  		break;
  	}
  	else
  		texto+=count+"-";
  }

  resposta.innerHTML = texto;
}

Script funcionando:

Resultado:

Note que colocamos um true no teste condicional do laço FOR. Isso faz com que o loop ocorra indefinidamente, até encontrar o número 143, que é o primeiro que é simultaneamente múltiplo de 11 e 13.

Se não encontra esse número, cai no ELSE que vai colocando os números na string texto.
Quando ele encontra, adiciona ele na string texto, ou seja é o último número, e simplesmente termina o laço FOR.

Instrução continue em Laços

Assim como o break, o continue também é uma instrução que altera o fluxo de um laço.
Porém, ele não encerra o laço e sim a iteração.

Ou seja, quando o JS se depara com o continue, ele termina aquele loop específico e continuar a rodar normalmente o laço. É como se a iteração estivesse chegado ao fim, mas sem executar o que vem abaixo do continue.

Exemplo de uso da instrução continue

Crie um script que exiba em uma página HTML todos os números inteiros de 1 até 100, exceto os múltiplos de 4.

A solução é bem simples. Basta pegar um laço FOR, fazer ele ir de 1 até 100.
Em cada valor, testamos se ele é múltiplo de 4.

Se for, damos um continue, e nada ocorre.
Se não for, adicionamos o número na string que vamos exibir na página.

Código HTML:

<!DOCTYPE html>
<html>
 <head>
    <title>Apostila JavaScript Progressivo</title>
    <script type="text/javascript" src="script.js"></script>
 </head>
 <body>
	<button onclick="teste()">Exibir</button><br />
	Resultado: <div id="resposta">
 </body>
</html>

script.js:

function teste(){
  var resposta = document.getElementById('resposta');
  var texto='';

  for(var count=1 ; count<=100 ; count++){
  	if(count%4==0)
  		continue;
  	else
  		texto+=count+"-";
  }

  resposta.innerHTML = texto;
}

Script funcionando:

JavaScript Progressivo