Laços em Javascript (While, Do While, For)

Laços em Javascript

Nenhum produto encontrado nessa seleção.

Laços em Javascript (ou loops) são uma maneira eficaz de se trabalhar com estruturas de repetições baseadas em estruturas condicionais dentro da linguagem, ao invés de repetir milhares de vezes determinado código, você pode utilizar os laços para repetir qualquer coisa até que qualquer outra coisa aconteça (parece confuso mas não, você vai ver).

Podemos utilizar os laços para repetir praticamente tudo em Javascript, desde repetições simples, como contagens de números, até repetições um pouco mais avançadas, para exibir propriedades de um objeto ou chaves de um array.

Dentre as funções que trabalham com laços, em Javascript temos o while, do while e for, cada um deles utilizados para uma ocasião especial.

Veja abaixo um pouco mais sobre cada um dos laços em Javascript.

Laços em Javascript: While

O laço while, um dos mais simples em Javascript, testa uma determinada condição no início de cada volta do laço e continua fazendo isso enquanto (while) a expressão condicional for avaliada como true. Você deve manipular a condição dentro do laço while para que, em determinado momento, ela seja avaliada como false e o laço termine. Caso você não faça isso, teremos um loop infinito, ou seja, seu laço nunca vai para até que o navegador trave.

Para utilizar o laço while, seguimos o seguinte padrão:

while ( condição ) {
	ação;
}

Ou se você preferir algo mais organizado:

  • while
  • ( condição entre parênteses )
  • { ações entre colchetes }

Por exemplo, suponhamos que eu queira contar de 0 a 10 utilizando o laço while, o código ficaria assim:

// Crio uma variável com valor 0
var count = 0;

// Inicio o laço com a condição
while ( count <= 10 ) {
	// Escrevo a variável count na página
	document.write( count );
	
	// Incremento a variável count em 1 a cada volta do laço
	count++;
}

Para entender perfeitamente o laço while, você deve ter entendido nossas aulas anteriores. Vou detalhar abaixo linha por linha do código:

Se traduzirmos aquele mesmo faço para o português, teríamos algo parecido com o trecho abaixo:

enquanto ( count for menor ou igual a 10 ) {
	escreva count no documento;
	soma mais um em count;
}

Ou seja, como a variável count tem o valor inicial zero (0), a cada volta do laço a condição "count <= 10" (count é menor ou igual a dez) é testada. Como no final de cada laço indicamos para o Javascript somar mais um na variável count (count++), o laço terá exatamente 10 voltas, até que count seja igual a dez, onde a condição retornará false e as voltas do laço terminam.

Laços em Javascript: Do while

No laço while (que expliquei anteriormente) a condição é testada antes que o laço seja executado, com isso, caso a condição falhe, o laço nunca será executado.

Do while é praticamente idêntico ao while, porém, a condição só é testada depois da ação do laço ser executada, assim, se a condição falhar, o laço será executado pelo menos uma vez.

Vamos mudar um pouco o exemplo que mostrei em while:

// Crio uma variável com valor 11
var count = 11;

// Inicio o laço com a condição
while ( count <= 10 ) {
	// Escrevo a variável count na página
	document.write( count );
	
	// Incremento a variável count em 1 a cada volta do laço
	count++;
}

Agora o valor da variável count é 11, ou seja, a condição count <= 10 vai retornar false porque o valor da variável é maior que 10. Nesse caso, nosso laço não será executado. Porém, se modificarmos este laço para do while, ele será executado uma vez, exibindo 11 na tela, só depois vai verificar a condição, que retornará false e o laço termina.

// Crio uma variável com valor 11
var count = 11;

// Inicio o laço com uma ação
do {
	// Escrevo a variável count na página
	document.write( count );
	
	// Incremento a variável count em 1 a cada volta do laço
	count++;
} while ( count <= 10 ) // Só agora verifico a condição

Pode ser que do while seja bastante útil em determinadas áreas do seu código Javascript.

A organização de do while fica assim:

  • do { ação em colchetes }
  • while ( condição entre parênteses )

Laços em Javascript: For

Os laços for têm a mesma função dos laços while, fazer algo repetitivo. No entanto, ao invés de utilizar uma expressão desconhecida, utilizamos um conjunto fixo de circunstâncias. Nele, temos que inicializar uma variável com um valor qualquer, testar uma condição, e incrementar ou decrementar o valor da variável inicial, tudo na mesma instrução.

for ( valor inicial; condição; incremento++ ou decremento-- ) {
	Ações;
}

Ou seja, são três instruções diferentes: uma atribuição (a uma variável inicial), um teste condicional e, logo em seguida, uma atualização, seja de incremento ou decremento.

Por exemplo, suponhamos que você queira contar até 10 (como fizemos no laço while), o código ficaria assim:

// Laço for
for ( var i = 0; i <= 10; i++ ) {
	document.write( i );
}

Isso irá retornar exatamente 012345678910 na tela do navegador.

Veja abaixo as instruções do laço for (o que vem entre parênteses):

  • Atribuição: var i = 0;
  • Condição: i <= 10; (i é menor ou igual a 10)
  • Atualização: i++ (nesse caso, de incremento)

As ações vêm entre colchetes.

For em array e objetos

Apesar de não termos visto arrays e objetos ainda, o laço for é amplamente utilizado com arrays e objetos para acessarmos suas chaves ou propriedades, respectivamente.

Não vou entrar muito em detalhes aqui, pois, veremos isso posteriormente em nossas aulas de Javascript, mas veja exemplos:

// um array
var meu_array = new Array();

// Cria as chaves do array
meu_array = [ 'Oi, ', 'meu ', 'nome ', 'é Luiz' ];

// Cria o laço e acessa todas as chaves do array
for ( var i = 0; i < meu_array.length; i++ ) { 
	// Escreve: Oi, meu nome é Luiz
	document.write( meu_array[ i ] );
}

Outro modo para utilizar o laço for é utilizando a palavra in, também com arrays e objetos:

// um array
var meu_array = new Array();

// Cria as chaves do array
meu_array = [ 'Oi, ', 'meu ', 'nome ', 'é Luiz' ];

// Cria o laço e acessa todas as chaves do array
for ( meu_array in valores ) { 
	// Escreve: Oi, meu nome é Luiz
	document.write( valores );
}

Se você já trabalhou com PHP, vai ver que for com a palavra in, é a mesma coisa que a função foreach do PHP.

Laços em Javascript: Break e continue

Um fato interessante e que não encontramos em muitos livros, é que você pode utilizar a palavra break; para parar um laço imediatamente, ou continue; para continuar. Por exemplo, suponhamos que você tenha um array com mil valores e deseja que um laço pare imediatamente ao encontrar um determinado valor (10, por exemplo), para isso basta utilizar a palavra break;.

// Cria o laço e acessa todas as chaves do array
for ( var i = 0; i < 1000; i++ ) { 
	// Escreve
	document.write( i + ', ' );
	
	// Verifica se i é maior ou igual a 10
	if ( i >= 10 ) {
		// Para o laço
		break;
	}
}

Claro que você pode encontrar métodos mais eficazes para realizar essa tarefa, no entanto, é uma opção.

Outras aulas

Caso tenha perdido a aula anterior, segue o link:

Próxima aula:

Caso queira visualizar todas as aulas dessa sessão em ordem cronológica invertida:

/4 Comentários/por