JavaScript para loop (com exemplos)

Neste tutorial, você aprenderá sobre os loops e sobre os loops for em JavaScript com a ajuda de exemplos.

Na programação, os loops são usados ​​para repetir um bloco de código.

Por exemplo, se você quiser mostrar uma mensagem 100 vezes, poderá usar um loop. É apenas um exemplo simples; você pode conseguir muito mais com loops.

Este tutorial se concentra no forloop de JavaScript . Você aprenderá sobre os outros tipos de loops nos próximos tutoriais.

JavaScript para loop

A sintaxe do forloop é:

  for(initialExpression; condition; updateExpression) ( // for loop body )

Aqui,

  1. A initialExpression inicializa e / ou declara variáveis ​​e executa apenas uma vez.
  2. A condição é avaliada.
    • Se a condição for false, o forloop é encerrado.
    • se a condição for true, o bloco de código dentro do forloop é executado.
  3. O updateExpression atualiza o valor de initialExpression quando a condição é true.
  4. A condição é avaliada novamente. Esse processo continua até que a condição seja false.

Para saber mais sobre as condições , visite Comparação de JavaScript e operadores lógicos.

Fluxograma de JavaScript para loop

Exemplo 1: exibir um texto cinco vezes

 // program to display text 10 times const n = 5; // looping from i = 1 to 5 for (let i = 1; i <= n; i++) ( console.log(`I love JavaScript.`); )

Resultado

Eu amo JavaScript. Adoro JavaScript. Eu amo JavaScript. Adoro JavaScript. Eu amo JavaScript.

Veja como funciona este programa.

Iteração Variável Condição: i <= n Açao
1ª i = 1
n = 5		 true Adoro JavaScript. é impresso.
i é aumentado para 2 .
2ª i = 2
n = 5		 true Adoro JavaScript. é impresso.
i é aumentado para 3 .
3ª i = 3
n = 5		 true Adoro JavaScript. é impresso.
i é aumentado para 4 .
4º i = 4
n = 5		 true Adoro JavaScript. é impresso.
i é aumentado para 5 .
5 ª i = 5
n = 5		 true Adoro JavaScript. é impresso.
i é aumentado para 6 .
6º i = 6
n = 5		 false O loop é encerrado.

Exemplo 2: números de exibição de 1 a 5

 // program to display numbers from 1 to 5 const n = 5; // looping from i = 1 to 5 // in each iteration, i is increased by 1 for (let i = 1; i <= n; i++) ( console.log(i); // printing the value of i )

Resultado

 1 2 3 4 5

Veja como funciona este programa.

Iteração Variável Condição: i <= n Açao
1ª i = 1
n = 5		 true 1 é impresso.
i é aumentado para 2 .
2ª i = 2
n = 5		 true 2 é impresso.
i é aumentado para 3 .
3ª i = 3
n = 5		 true 3 é impresso.
i é aumentado para 4 .
4º i = 4
n = 5		 true 4 é impresso.
i é aumentado para 5 .
5 ª i = 5
n = 5		 true 5 é impresso.
i é aumentado para 6 .
6º i = 6
n = 5		 false O loop é encerrado.

Exemplo 3: Exibir soma de n números naturais

 // program to display the sum of natural numbers let sum = 0; const n = 100 // looping from i = 1 to n // in each iteration, i is increased by 1 for (let i = 1; i <= n; i++) ( sum += i; // sum = sum + i ) console.log('sum:', sum);

Resultado

 soma: 5050

Aqui, o valor da soma é 0 inicialmente. Em seguida, um forloop é iterado i = 1 to 100. Em cada iteração, i é adicionado à soma e seu valor é aumentado em 1 .

Quando i se torna 101 , a condição de teste é falsee a soma será igual a 0 + 1 + 2 +… + 100.

O programa acima para adicionar a soma dos números naturais também pode ser escrito como

 // program to display the sum of n natural numbers let sum = 0; const n = 100; // looping from i = n to 1 // in each iteration, i is decreased by 1 for(let i = n; i>= 1; i-- ) ( // adding i to sum in each iteration sum += i; // sum = sum + i ) console.log('sum:',sum);

Este programa também fornece a mesma saída do Exemplo 3 . Você pode realizar a mesma tarefa de muitas maneiras diferentes na programação; programação tem tudo a ver com lógica.

Embora ambas as formas estejam corretas, você deve tentar tornar seu código mais legível.

JavaScript infinito para loop

Se a condição de teste em um forloop for sempre true, ele será executado para sempre (até que a memória esteja cheia). Por exemplo,

 // infinite for loop for(let i = 1; i> 0; i++) ( // block of code )

No programa acima, a condição é sempre trueque executará o código infinitas vezes.

No próximo tutorial, você vai aprender sobre whilee do… whileloop.

Artigos interessantes...