É 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 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 e são exemplos de loops controlados por entrada. controlados por entrada for while Os loops 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 . controlados por saída do-while Vamos examinar alguns exemplos de loops controlados por entrada: Enquanto Loop Um loop possui a seguinte sintaxe. while while (condition) { // loop's body } A lista a seguir explica a funcionalidade de um loop while: O loop leva uma condição de teste entre parênteses. while O programa verifica a condição para ver se ela é aprovada ou reprovada. O código dentro do corpo do loop é executado enquanto a condição for aprovada. 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) O trecho de código acima inicializa as variáveis “arr”, “i” e “num”. A variável " é um array que contém os valores que passam na condição de teste. arr" A variável "i" acompanha cada incremento após cada iteração. A variável “número” compara o valor de “i” com seu valor (5) após cada iteração. 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”. Uma vez que o valor atual de “i” falha na condição, neste caso, onde o valor de é maior que o que é 6, o loop para de funcionar. “i” “número” O método é uma função JavaScript integrada que adiciona um novo item ao final de um array. push() Saída [1, 2, 3, 4, 5] Loop do-while Um loop se assemelha muito ao loop while; a principal diferença entre o e o loop é que o loop garante a execução do código pelo menos uma vez antes de avaliar a condição do loop; o loop tem a seguinte sintaxe abaixo. do-while while do-while do-while do-while do { // loop's body } while (//condition) O é um excelente exemplo de loop controlado por saída. Isso reside no fato de que os loops controlados por saída dão 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 prioridade 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: Inicializamos as variáveis “i” e “num”. O console registra o valor de "i" (1) antes de avaliar a condição do loop. A condição é verificada e o valor de "i" aumenta em +1 após cada iteração. O loop termina sua operação quando “i” for maior que “num”. Saída 1 2 3 4 5 Embora o loop seja muito semelhante ao loop , existem diferenças sutis que devemos observar; vamos dar outro exemplo que compara a diferença entre o loop e . do-while while while do-while let i = 5; let num = 4 while( i < num) { console.log(i) } Este loop acima não retornará nenhum resultado ao console; agora, por que isso acontece? while Inicializamos as variáveis “i” e “num” com valores de 5 e 4, respectivamente. A condição verifica se o valor de “i” é menor que “num”. Se for verdade, ele registra cada valor respectivo. 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 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 e . do-while do-while while Para loop O é um tipo único de loop e um dos loops mais comumente usados pelos programadores. O é 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 loop for loop for (Expression1...; Expression2....; Expression3...{ //code block } Expressão 1: Esta parte de um também é conhecida como área ; é o início do nosso 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. for loop de inicialização for loop Expressão 2: Esta é a segunda parte do loop; esta parte define a instrução que executaria o loop. condicional 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. Primeiro, inicializamos a variável contadora " com valor zero. i" A seguir, criamos a instrução condicional que manteria o código em execução. Comparamos o valor de “i” com 100; se passar neste teste, "Hello World" será registrado. Este processo se repete enquanto o contador aumenta +1 após cada iteração. 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 é 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. for-each 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: Inicializamos um array com o nome de variável "myArray" e o armazenamos com números inteiros variando de 1 a 5. O método array usa três parâmetros e aplica uma função de retorno de chamada no array. for-each Está linha; multiplica o valor do elemento atual por 2 e atribui o valor retornado ao índice do elemento atual. arr[index] = num * 2 Tome nota: o método array não retorna um novo array; em vez disso, modifica o array original e o retorna. for-each Saída [2, 4, 6, 8, 10] O que são For... In e For... de Loops em JavaScript? Os loops e 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. for... in for... of O e são semelhantes na forma como iteram/se movem pelos objetos, a principal diferença entre eles é mostrada na forma como retornam valores. for... in for... of para... em Loops Um loop é útil quando você precisa extrair as chaves/propriedades de um objeto e suas propriedades correspondentes do objeto pai. O loop à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 em ação. for... in for... in for... in 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 que contém vários nomes de alunos e suas pontuações correspondentes. Usando , conseguimos recuperar apenas os nomes dos alunos, que representam as do objeto e armazená-los em um array usando o método . studentScores for... in chaves studentScores, push() Saída ["John", "Dan", "Tricia", "Jamal", "Jane"] para... de Loops O loop é um tipo especial de loop que itera sobre os valores de objetos iteráveis, como arrays, strings, mapas, etc., os loops não se preocupam com as chaves ou propriedades de um objeto , em vez disso, mostram prioridades apenas nos valores. for... of for... of O loop 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 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 e são uma ótima maneira de percorrer objetos iteráveis; a principal diferença é que um loop retorna a chave de um objeto, enquanto o retorna apenas os valores de objetos iteráveis. for... in for... of for... in for... of 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.
