Loops JavaScript para iniciantes: aprenda o básico

É uma segunda-feira sombria e você está no trabalho. Todos nós sabemos como as segundas-feiras podem ser deprimentes, certo? Seu chefe se aproxima de você e diz: “Ei, tenho 300 e-mails não abertos que recebemos no fim de semana. Quero que você abra cada um, anote o nome do remetente e exclua os e-mails quando terminar”.

Esta tarefa parece muito cansativa se você tentar fazê-la manualmente. A próxima coisa que você pensa provavelmente é entrar no Google e procurar um software que possa automatizar esse processo e facilitar sua vida, certo?

Bem, temos situações semelhantes em programação. Há momentos em que você precisa realizar tarefas repetidas até que sejam concluídas. Como você resolve esse problema? Em JavaScript, temos o que chamamos de loops. Os loops nos permitem resolver tarefas repetidas, reduzindo a quantidade de código necessária para concluir a tarefa.

Neste artigo discutiremos o que é um loop, como funciona e os vários métodos que podemos usar para aplicá-lo em nossos programas.

O que é um loop?

Loops são usados em JavaScript para executar ações repetidas facilmente. Eles são baseados em uma condição que retorna verdadeiro ou falso.

Uma condição é uma expressão que deve ser passada para manter um loop em execução. Um loop é executado quando as condições especificadas retornam um valor verdadeiro e para quando retornam um valor falso.

Quando você precisa usar um loop?

Os loops são úteis para realizar tarefas repetitivas. Por exemplo, usar um loop encurta o código necessário para resolver um problema. Economiza tempo, otimiza o uso de memória e melhora a flexibilidade.

O verdadeiro significado de um loop vai além da redução do comprimento do código e da limitação da repetição. Eles também ajudam ao trabalhar com dados em uma matriz, objeto ou outras estruturas. Além disso, os loops promovem a modularidade do código, reduzindo o código repetitivo e aumentando a reutilização do código, o que possibilita a criação de códigos que podem ser usados em diferentes partes do seu projeto.

Tipos de loops

Existem duas categorias principais de loops: loops controlados por entrada e loops controlados por saída.

Os loops controlados por entrada avaliam a condição na "entrada do loop" antes de executar o corpo do loop. Se a condição for verdadeira, o corpo funciona. Caso contrário, o corpo não funciona. Os loops for e while são exemplos de loops controlados por entrada.

Os loops controlados por saída concentram-se no corpo do loop sobre a condição de teste, garantindo que o corpo do loop seja executado pelo menos uma vez antes de avaliar a condição de teste. Um bom exemplo de loop controlado por saída é o loop do-while .

Vamos examinar alguns exemplos de loops controlados por entrada:

Enquanto Loop

Um loop while possui a seguinte sintaxe.

 while (condition) { // loop's body }

A lista a seguir explica a funcionalidade de um loop while:

1. O loop while leva uma condição de teste entre parênteses.

   
   

2. O programa verifica a condição para ver se ela é aprovada ou reprovada.

   
   

3. O código dentro do corpo do loop é executado enquanto a condição for aprovada.

   
   

4. O programa encerra sua operação quando a condição de teste falha.

Abaixo, vamos dar um exemplo prático do loop while :

 let arr = []; let i = 1; let number = 5; while (i <= number) { arr.push(i) i++ } console.log(arr)

1. O trecho de código acima inicializa as variáveis “arr”, “i” e “num”.

   
   

2. A variável " arr" é um array que contém os valores que passam na condição de teste.

   
   

3. A variável "i" acompanha cada incremento após cada iteração.

   
   

4. A variável “número” compara o valor de “i” com seu valor (5) após cada iteração.

   
   

5. O código dentro do corpo do loop envia cada valor de “i” após cada iteração para a matriz, desde que “i” seja menor ou igual a “número”.

   
   

6. Uma vez que o valor atual de “i” falha na condição, neste caso, onde o valor de “i” é maior que o “número” que é 6, o loop para de funcionar.

   
   

O método push() é uma função JavaScript integrada que adiciona um novo item ao final de um array.

Saída

 [1, 2, 3, 4, 5]

Loop do-while

Um loop do-while se assemelha muito ao loop while; a principal diferença entre o while e o loop do-while é que o loop do-while garante a execução do código pelo menos uma vez antes de avaliar a condição do loop; o loop do-while tem a seguinte sintaxe abaixo.

 do { // loop's body } while (//condition)

O do-while é um excelente exemplo de loop controlado por saída. Isso reside no fato de que os loops controlados por saída dão prioridade ao corpo do loop antes da condição de teste. Agora vamos nos aprofundar em um exemplo prático de código utilizando o loop do-while .

Exemplo:

 let i = 1; let num = 5; do { console.log(i); i++; } while (i <= num);

Agora, vamos analisar este trecho de código:

1. Inicializamos as variáveis “i” e “num”.

   
   

2. O console registra o valor de "i" (1) antes de avaliar a condição do loop.

   
   

3. A condição é verificada e o valor de "i" aumenta em +1 após cada iteração.

   
   

4. O loop termina sua operação quando “i” for maior que “num”.

   
   

Saída

 1 2 3 4 5

Embora o loop do-while seja muito semelhante ao loop while , existem diferenças sutis que devemos observar; vamos dar outro exemplo que compara a diferença entre o loop while e do-while .

 let i = 5; let num = 4 while( i < num) { console.log(i) }

Este loop while acima não retornará nenhum resultado ao console; agora, por que isso acontece?

1. Inicializamos as variáveis “i” e “num” com valores de 5 e 4, respectivamente.

   
   

2. A condição verifica se o valor de “i” é menor que “num”.

   
   

3. Se for verdade, ele registra cada valor respectivo.

   
   

4. Como o valor inicial de “i” excede o de “num”, o loop nunca é executado.

   
   

Agora, vamos dar um exemplo semelhante com o loop do-while .

 let i = 5; let num = 4; do { console.log(i) } while ( i < num)

Saída

 5

O loop do-while garante a execução do bloco de código, que retorna 5 no console, embora “i” tenha um valor maior que “num” inicialmente, ele ainda é logado no console uma vez. Esta representação mostra a diferença de funcionalidade entre o loop do-while e while .

Para loop

O for loop é um tipo único de loop e um dos loops mais comumente usados pelos programadores. O for loop é um loop que executa um bloco de código por um número específico de vezes, dependendo de uma condição. O loop for tem a seguinte sintaxe abaixo.

 for (Expression1...; Expression2....; Expression3...{    //code block }

Expressão 1: Esta parte de um for loop também é conhecida como área de inicialização ; é o início do nosso for loop e a área onde a variável do contador é definida. A variável counter é usada para rastrear o número de vezes que o loop é executado e armazená-lo como um valor.

Expressão 2: Esta é a segunda parte do loop; esta parte define a instrução condicional que executaria o loop.

Expressão 3: É aqui que o loop termina; a variável contador nesta seção atualiza seu valor após cada iteração aumentando ou diminuindo o valor conforme especificado na condição.

Vamos mergulhar em um exemplo usando o loop for.

 for (let i = 0; i < 100; i++) {  console.log("Hello World" ) }

A partir do trecho de código acima, vamos analisá-lo juntos.

1. Primeiro, inicializamos a variável contadora " i" com valor zero.

   
   

2. A seguir, criamos a instrução condicional que manteria o código em execução.

   
   

3. Comparamos o valor de “i” com 100; se passar neste teste, "Hello World" será registrado.

   
   

4. Este processo se repete enquanto o contador aumenta +1 após cada iteração.

   
   

5. O loop termina quando o valor do contador atinge 100.

   
   

Saída

 Hello World Hello World Hello World ... //repeated 97 more times making it 100 "Hello World" in total ...

para cada loop

O loop for-each é um método em JavaScript que percorre um array e aplica uma função de retorno de chamada em cada elemento desse array; uma função de retorno de chamada é simplesmente outra função passada como parâmetro para uma função. A função de retorno de chamada funciona sequencialmente após a execução da função principal.

Vamos examinar a sintaxe básica de um loop for-each .

 array.forEach(function(currentValue, index, arr))

O código fornecido acima explica o funcionamento de um loop for-each .

• Este loop aceita três parâmetros, que são o valor atual, um índice e um array.

• O valor atual representa o valor presente do elemento na matriz.

• O índice é um parâmetro opcional que informa a posição numerada do elemento atual naquele array.

• O arr é outro parâmetro opcional que informa a qual array o elemento pertence.

  
  

 let myArray = [1, 2, 3, 4, 5]; array.forEach((num, index, arr) => { arr[index] = num * 2; console.log(array); });

Vamos analisar o exemplo acima:

1. Inicializamos um array com o nome de variável "myArray" e o armazenamos com números inteiros variando de 1 a 5.

   
   

2. O método for-each array usa três parâmetros e aplica uma função de retorno de chamada no array.

   
   

3. Está linha; arr[index] = num * 2 multiplica o valor do elemento atual por 2 e atribui o valor retornado ao índice do elemento atual.

   
   

Tome nota: o método for-each array não retorna um novo array; em vez disso, modifica o array original e o retorna.

Saída

 [2, 4, 6, 8, 10]

O que são For... In e For... de Loops em JavaScript?

Os loops for... in e for... of são muito úteis quando se trata de iterar sobre objetos iteráveis; objetos iteráveis referem-se a qualquer elemento que pode ser repetido. Exemplos comuns de objetos iteráveis são arrays, strings, conjuntos, etc.

O for... in e for... of são semelhantes na forma como iteram/se movem pelos objetos, a principal diferença entre eles é mostrada na forma como retornam valores.

para... em Loops

Um loop for... in é útil quando você precisa extrair as chaves/propriedades de um objeto e suas propriedades correspondentes do objeto pai. O loop for... in às vezes pode iterar através de um objeto de uma maneira diferente da maneira como foi definido naquele objeto específico; vamos dar um exemplo de um loop for... in em ação.

 let namesArray = []; const studentScores = { John: 60, Dan: 53, Tricia: 73, Jamal: 45, Jane: 52 } for(const name in studentScores){ namesArray.push(name); } console.log(namesArray);

No exemplo acima, definimos um objeto chamado studentScores que contém vários nomes de alunos e suas pontuações correspondentes. Usando for... in , conseguimos recuperar apenas os nomes dos alunos, que representam as chaves do objeto studentScores, e armazená-los em um array usando o método push() .

Saída

 ["John", "Dan", "Tricia", "Jamal", "Jane"]

para... de Loops

O loop for... of é um tipo especial de loop que itera sobre os valores de objetos iteráveis, como arrays, strings, mapas, etc., os loops for... of não se preocupam com as chaves ou propriedades de um objeto , em vez disso, mostram prioridades apenas nos valores.

O loop for... of não é capaz de iterar sobre objetos regulares e gerará um erro, pois eles não são iteráveis. Vamos dar um exemplo usando o loop for.. of .

 let numArray = [1,2,3,4,5] for (const value of numArray) {   console.log(value) } // Output = 1,2,3,4,5

Em resumo, os loops for... in e for... of são uma ótima maneira de percorrer objetos iteráveis; a principal diferença é que um loop for... in retorna a chave de um objeto, enquanto o for... of retorna apenas os valores de objetos iteráveis.

O que é um loop infinito e como podemos evitá-lo?

Um loop infinito refere-se a um loop que continua em execução indefinidamente; isso ocorre quando um loop não tem condição de saída definida. Loops infinitos são perigosos porque podem travar o navegador e levar a ações indesejadas no programa.

 // infinite loop sample while (true) { console.log("keep on running") }

Para evitar loops infinitos em seu programa, sempre certifique-se de que haja uma condição de saída definida em seu loop.

Conclusão

Muito obrigado por chegar ao final deste artigo, loops em Javascript são um conceito importante que todo desenvolvedor precisa dominar, pois é muito valioso para criar um programa bom e otimizável. Acredito que com este artigo você será capaz de entender os fundamentos e as complexidades do uso de loops em seu programa.