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.
