Javascript: guia sobre laços (loops)

Neste artigo, você aprenderá como usar loops em JavaScript para repetir uma série de ações.

Diferentes tipos de loops em JavaScript

Os loops são usados ​​para executar o mesmo bloco de código repetidamente se certas condições forem atendidas. A ideia básica por trás dos loops é automatizar tarefas repetitivas em um programa para economizar tempo e esforço. O JavaScript agora suporta cinco tipos diferentes de loops:

• while — Faz um loop em um bloco de código contanto que a condição especificada seja avaliada como verdadeira.
• do while – repete um bloco de código uma vez e avalia a condição. Se a condição for verdadeira, a instrução será repetida enquanto a condição especificada for verdadeira.
• for — Percorre um bloco de código até que o contador atinja um número especificado.
• for in — Percorre as propriedades de um objeto.
• for of — iterar sobre objetos iteráveis, como arrays, strings, etc.

Abaixo, discutiremos cada uma das instruções de loop em detalhes.

Leia mais: Javascript: guia sobre arrays

While

Esta é a instrução de loop mais simples fornecida pelo JavaScript.

Um loop while percorre um bloco de código, desde que uma condição especificada seja avaliada como verdadeira. Quando a condição falha, o loop é interrompido. A sintaxe geral para um loop while é:

while ( condição ) {
    // Código a ser executado
}

O exemplo a seguir define um loop que continua em execução enquanto a variável i for menor ou igual a 5. A variável i é incrementada em 1 cada vez que o loop é executado:

var i = 1;
 while (i <= 5) {
  document.write("<p>O número é " + i + "</p>");
    i++;
}

Observação: certifique-se de que a condição especificada no loop eventualmente se torne falsa. Caso contrário, o loop nunca parará de iterar, o que é conhecido como loop infinito. Um erro comum é esquecer de incrementar a variável contadora (no nosso caso variável).

Do while

Um loop do-while é uma variação do loop while que avalia uma condição no final de cada iteração do loop. Com um loop do-while, um bloco de código é executado uma vez e, em seguida, uma condição é avaliada; se a condição for verdadeira, a instrução é repetida enquanto a condição especificada for avaliada como verdadeira. A sintaxe geral para um loop do-while é:

do {
    // Código a ser executado
}
while(condition);

O código JavaScript no exemplo abaixo define um loop começando com i=1. Em seguida, imprimirá a saída e incrementará o valor da variável iem em 1. Depois disso, a condição é avaliada e o loop continua em execução enquanto ivariável for menor ou igual a 5.

var i = 1;
do {
    document.write("<p>O número é " + i + "</p>");
    i++;
}
while(i <= 5);

Diferença entre loop while e do…while

Uma diferença importante entre o loop while e loop do-while. A condição a ser avaliada é testada no início de cada iteração do loop, portanto, se a expressão condicional for avaliada como falsa, o loop nunca será executado.

Com um loop do-while , por outro lado, o loop sempre será executado uma vez, mesmo que a expressão condicional seja avaliada como falsa porque, ao contrário de um loop while , a condição é avaliada no final da iteração do loop, não no início.

For

Um loop for repete um pedaço de código desde que certas condições sejam atendidas. Geralmente é usado para executar um trecho de código um determinado número de vezes. Sua sintaxe é:

for (inicialização; condição; iteração) {
   // código a ser executado
}

Os parâmetros da instrução de loop for têm os seguintes significados:

• inicialização — usado para inicializar a variável do contador e avaliá-la incondicionalmente uma vez antes que o corpo do loop seja executado pela primeira vez.
• condição – é avaliada no início de cada iteração. Se for avaliado como verdadeiro, a instrução de loop será executada. Se for avaliado como falso, a execução do loop termina.
• incremento — atualiza o contador de loop com um novo valor cada vez que o loop é executado.

O exemplo a seguir define um loop começando com i=1. O loop continuará até que o valor da variável i seja menor ou igual a 5. A variável i será incrementada em 1 cada vez que o loop for executado:

for(var i=1; i<=5; i++) {
    document.write("<p>O número é " + i + "</p>");
}

O loop for é especialmente útil para iterar através de arrays. O exemplo a seguir mostrará como imprimir cada item ou elemento de um array JavaScript.

// Um array com alguns elementos
var frutas = ["Maçã", "Banana", "Manga", "Laranja", "Mamão"];
 
// Percorre todos os elementos do array
for(var i=0; i<frutas.length; i++) {
     document.write("<p>" + frutas[i] + "</p>");
}

For in

Um loop for-in é um tipo especial de loop que itera sobre as propriedades de um objeto ou os elementos de um array. A sintaxe geral para um loop for-in é:

for ( variável no objeto ) {
    // Código a ser executado
}

A variável dentro do loop for-in ou contador do loop, é uma string, não um número. Contém o nome da propriedade atual ou o índice do elemento da matriz atual.

O exemplo a seguir mostra como percorrer todas as propriedades de um objeto JavaScript.

// Um objeto com algumas propriedades
var pessoa = {"nome": "Clark", "sobrenome": "Kent", "idade": "36"};
// Loop através de todas as propriedades do objeto
for (var propriedade in pessoa) {
document.write("<p>" + propriedade + " = " + pessoa[propriedade] + "</p>");
}

Sendo assim, você pode percorrer os elementos de um array, assim:

// Um array com alguns elementos
var frutas = ["Maçã", "Banana", "Manga", "Laranja", "Mamão"];
// Loop através de todos os elementos do array
for (var i in frutas) {
document.write("<p>" + frutas[i] + "</p>");
}

Nota: for-inloop não deve ser usado para iterar sobre arrays onde a ordem do índice é importante. É melhor usar um loop for com um índice numérico.

For of (ES6)

O ES6 apresenta um novo loop for-of que nos permite iterar sobre arrays ou outros objetos iteráveis ​​(como strings) com muita facilidade. Além disso, o código dentro do loop é executado para cada elemento do iterável.

Os exemplos a seguir mostrarão como usar esse loop para iterar sobre arrays e strings.

// Iterando sobre o array
let letters = ["a", "b", "c", "d", "e", "f"];
for(let letter of letters) {
    console.log(letter); // a,b,c,d,e,f
}
// Iterando sobre a string
let greet = "Hello World!";
for(let character of greet) {
    console.log(character); // H,e,l,l,o, ,W,o,r,l,d,!
}

Observação: loops for-of não funcionam com objetos porque eles não são iteráveis. Se você deseja iterar sobre as propriedades de um objeto, pode usar um loop for-in.