Loop For do JavaScript

Nesse tutorial você vai aprender como usar a instrução de repetição for para criar um loop com várias opções.

English version: https://www.javascripttutorial.net/javascript-for-loop/

A instrução de repetição for do JavaScript permite que você crie um loop com três expressões opcionais. O código a seguir ilustra a sintaxe da instrução de loop for:

for

A estrutura for possui 3 partes na sua chamada:

for (início; teste; incremento){
  bloco de códigos a serem repedidos
}

1. Início: Inicialização de um contador.
2. Teste lógico: Verifica se a condição é verdadeira;
3. Incremento: Adiciona uma unidade ao contador;

for (contador = 1; contador < 6; contador++){
  console.log(`O contador agora é: ${contador}`);
}

1) Início ou Inicialização (initialization)

A expressão initialization inicializa o loop. A expressão de inicialização é executada somente uma vez, quando o loop começa. Você normalmente usa a initialization para inicializar uma variável de contador. Se você usar a palavra-chave var para declarar a variável do contador, a variável terá a função ou escopo global. Em outras palavras, você pode fazer referência à variável do contador após o término do loop. No entanto, se você usar a palavra-chave let para declarar a variável do contador, ela terá um escopo bloqueado, acessível apenas dentro do loop.

2) Condição ou teste (condition)

A condição condition é uma expressão que é avaliada uma vez antes de cada iteração. A instrução statement dentro do loop é executada apenas quando a condição é avaliada como true. O loop será encerrado se a condição condition for avaliada como false. Observe que a condição é opcional. Se você omitir, a instrução do loop for considerará verdadeira.

3) Contador ou Pós-expressão (post-expression)

A instrução de loop for avalia (executa) a post-expression após cada iteração do loop. Geralmente, você usa a pós-expressão para atualizar a variável do contador.

O fluxograma a seguir ilustra o loop for:

No loop for as três expressões são opcionais. A seguir mostramos como usar o loop for sem nenhuma expressão:

Exemplos de loop for no JavaScript

Vamos dar alguns exemplos de como usar o loop for.

1) Exemplo for simples

O exemplo a seguir usa a instrução loop for que mostra os números de 1 a 5 na janela de console:

Resultado:

Entenda como esse código funciona, passo a passo:

• Primeiro, declare a variável counter e inicialize-a com o valor 1.
• Segundo, exiba o valor da variável counter na janela de console se o seu valor for menor que 5 e execute o próximo passo. Se o valor de counter for igual ou maior que 5, então finalize a execução do loop for.
• Terceiro, incremente (aumente) o valor da variável em mais 1 e volte a executar o segundo passo.

Como o loop for usa a palavra-chave var para declarar a variável counter, o escopo de counter é global. Portanto, podemos acessar a variável counter após o término do loop, ou seja, em qualquer parte do código fonte. A partir do ES6 você pode usar a palavra-chave let para declarar a variável do contador que é o local onde ela será usada.

Get Ricardo Reis’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Veja o exemplo a seguir:

O resultado apresentará um erro:

O acesso à variável counter após o loop for causa um erro ReferenceError.

2) Exemplo de for sem inicialização

O exemplo a seguir usa um loop for que omite a parte da inicialização:

Resultado:

3) Exemplo de for sem a parte da condição

Semelhante à expressão de inicialização initialization, a expressão de condição condition também é opcional. Se você omitir a expressão de condição, precisará usar uma instrução de interrupção break para finalizar o loop.

Resultado:

4) Exemplo de for sem as 3 expressões

Todas as três expressões da instrução do loop for são opcionais, portanto você pode omitir todas elas. Novamente, você deve usar uma instrução break para finalizar o loop e também modificar a variável do contador para executar o break em algum momento.

Resultado:

5) Exemplo de for sem a parte do corpo do loop

Curiosamente a instrução for pode ter um “corpo de loop vazio”. Nesse caso, você coloca um ponto e virgula imediatamente à instrução for. O exemplo a seguir calcula o total da soma de números de 1 até 10.

A expressão é colocada na post-expression (pós-expressão), portanto, ela usa uma declaração vazia no corpo do loop.

Resultado:

Nesse tutorial você aprendeu como usar a instrução de loop for no JavaScript para criar uma repetição com várias opções.

Veja o índice de todos os tutoriais JavaScript

Tutoriais JavaScript