Ciclos em JavaScript: for, forEach, while e do-while

Os ciclos em JavaScript executam o mesmo código vezes sem conta. São o que usas quando precisas de percorrer um array ou de repetir uma tarefa um determinado número de vezes. Neste capítulo vemos os ciclos for e while, os mais usados em JavaScript.

Ciclo for em JavaScript

O ciclo for em JavaScript executa código um número determinado de vezes. Eis um exemplo do ciclo for em utilização:

for (let i = 0; i < 5; i++) {
  console.log(i);
}

O ciclo for começa com a variável «i» a valer 0. A condição «i < 5» verifica se «i» é inferior a 5. Enquanto a condição se mantiver verdadeira, o código dentro das chavetas é executado e «i» é incrementada em 1. O ciclo continua até a condição «i < 5» se tornar falsa.

Este código mostra os números de 0 a 4 na consola.

Também podes usar o ciclo for para percorrer um array:

let tableau = ['un', 'deux', 'trois', 'quatre', 'cinq'];

for (let i = 0; i < tableau.length; i++) {
  console.log(tableau[i]);
}

O ciclo for percorre o array «tableau» usando a propriedade «length» do array para determinar quantos elementos tem de percorrer. Em cada iteração, o valor do elemento atual é mostrado na consola.

Também podes usar a instrução «break» para sair de um ciclo for mais cedo:

for (let i = 0; i < 5; i++) {
  console.log(i);
  if (i === 3) {
    break;
  }
}

Ciclo for com continue em JavaScript

Existe ainda a instrução «continue», que salta para a iteração seguinte do ciclo em curso sem executar o resto da iteração atual. Eis um exemplo da instrução «continue» num ciclo for:

for (let i = 0; i < 10; i++) {
  if (i % 2 !== 0) {
    continue;
  }
  console.log(i);
}

Neste exemplo, o ciclo for percorre os números de 0 a 9. A instrução «continue» está dentro do ciclo e verifica se o valor de «i» é ímpar. Quando é, o «continue» passa logo à iteração seguinte sem executar o resto da iteração atual.

Este código mostra os números pares de 0 a 8 na consola.

Ciclo forEach em JavaScript

O ciclo forEach em JavaScript percorre os elementos de um array ou de um objeto. Eis um exemplo do ciclo forEach com um array:

let tableau = ['un', 'deux', 'trois', 'quatre', 'cinq'];

tableau.forEach(function(element) {
  console.log(element);
});

O ciclo forEach percorre o array «tableau» e executa a função anónima passada como argumento para cada elemento. O valor do elemento atual fica disponível dentro dessa função através da variável «element».

Este código mostra cada elemento do array na consola.

Também podes usar o forEach com objetos, através do método «Object.entries()»:

let objet = {
  un: 'valeur1',
  deux: 'valeur2',
  trois: 'valeur3'
};

Object.entries(objet).forEach(function([clé, valeur]) {
  console.log(clé + ': ' + valeur);
});

O método «Object.entries()» devolve um array de entradas [chave, valor], uma por cada propriedade do objeto «objet». O ciclo forEach em JavaScript percorre esse array e executa a função anónima passada como argumento para cada entrada. A chave e o valor ficam disponíveis dentro da função através das variáveis «clé» e «valeur».

Este código mostra cada entrada do array sob a forma «chave: valor» na consola.

Ciclo while em JavaScript

O ciclo while em JavaScript executa código enquanto a condição indicada for verdadeira. Eis um exemplo do ciclo while em utilização:

let a = 0;

while (a < 5) {
  console.log(a);
  a++;
}

O ciclo while começa com a condição «a < 5». Enquanto essa condição se mantiver verdadeira, o código dentro das chavetas é executado e a variável «a» é incrementada em 1. O ciclo continua até a condição «a < 5» se tornar falsa.

Este código mostra os números de 0 a 4 na consola.

Também podes usar o ciclo do-while, que executa primeiro o código dentro das chavetas e só depois verifica a condição:

let a = 0;

do {
  console.log(a);
  a++;
} while (a < 5);

Neste código, o ciclo do-while corre pelo menos uma vez, porque a condição só é verificada depois da primeira passagem pelas chavetas. Este código mostra igualmente os números de 0 a 4 na consola.

Tens de incluir uma instrução que incremente ou decremente a variável usada na condição do while, sob pena de criares um ciclo infinito. Sem ela, a condição mantém-se sempre verdadeira e o ciclo corre indefinidamente.

É essa alteração da variável em cada iteração que permite à condição tornar-se falsa a dada altura, o que põe fim ao ciclo.

Também é possível terminar um ciclo antes de a condição ficar falsa, com a instrução «break». O «break» interrompe imediatamente o ciclo e passa à instrução seguinte. Eis um exemplo da instrução «break» num ciclo while:

let a = 0;

while (true) {
  console.log(a);
  a++;
  if (a >= 5) {
    break;
  }
}

O ciclo while começa com a condição «true», o que significa que correria para sempre. A instrução «break», porém, está dentro do ciclo e é executada assim que o valor de «a» atinge 5. Isso interrompe o ciclo e passa à instrução seguinte.

Este código mostra os números de 0 a 4 na consola.

Conclusão

Percorremos os ciclos que o JavaScript oferece: o ciclo for, o ciclo forEach e o ciclo while. Vimos como usar cada um deles para executar código repetidamente e como usar instruções de controlo de fluxo como o «break» e o «continue» para os conduzir.