Dia 4 – JavaScript e laços de repetição

Dia 4 - Escreva sobre como trabalhar com laços de repetição na sua linguagem favorita

Bem-vindo amigos para mais um artigo em nosso Desafio 21 dias 21 artigos, hoje foi fazer uma pequena apresentação sobre os laços de repetição em Javascript, para ajudar iniciantes a conhecerem melhor esta fabulosa linguagem.

Muito útil para animar páginas da internet, elaborar validações em front-ends, auxiliar em rotinas de escrito, na verdade é pau para toda obra, fique conosco e veja o que podemos fazer.

É um novato em programação? Então vamos fazer uma pequena introdução. Antes de mais nada Loop e Repetição são sinônimos em programação.

Introdução

Imagine que ao iniciar a codificação o programa ira seguir uma sequência lógica de comandos, um após o outro, porém em algumas logicas acontecera que determinada combinação de comandos deverá ser repetida até obter um determinado resultado.

Para essa necessidade surgiram os laços de repetição, existem diversos tipos, cada um voltado para uma necessidade especifica.

Apresentando os laços

•         For
•         While
•         Do, While
•         Label
•         For... in
•         For... of

Cada um com uma especificidade que ajudam solucionar problemas simples e complexos, podendo ser utilizados sozinhos ou em conjunto, sendo ferramentas imprescindíveis na codificação nossa do dia a dia.

FOR

O primeiro laço a ser apresentado é o laço FOR, sendo utilizado em repetições com um limite real e conhecido. No exemplo abaixo será impresso os números de 0 até 9.

Ct_Limite = 10
 for (var i = 0; i < Ct_Limite ; i++) {
 console.log(“i: “ + i)
}

While

Este laço é mais complexo, pois existe a necessidade de um comando de saída, famoso por gerar inúmeros bugs de loop infinito. Neste exemplo imprimira de 0 até 9, sendo que a variável n será o elemento de saída quando atingir 10.

Ct_Limite = 10;
n = 0;
while (n < Ct_Limite) {
 console.log(n);  
 n++;
}

Do...While

Este comando é uma variação do While, porém apresenta uma diferença sutil. Enquanto no While puro a condição tem que ser verdadeira, para iniciar a repetição, neste caso a condição é sempre feita ao menos uma vez a depender da lógica. No exemplo sera impresso 1 e ao entrar no loop imprimira o restante até o 9.

Ct_Limite = 10;
i = 0;
do {
i += 1;
console.log(i);
} while (i < Ct_Limite);

Label

Utilizei muito em Cobol, através do perform, quando passei as linguagens senti falta desta solução, até descobrir o label, ele funciona marcando uma determinada sessão do código e permitindo sua referencia. Exemplo

markLoop:
while (theMark == true) {
 facaAlgo();
}

For... in

Funciona de maneira parecida ao For explicado anterior, com uma nuance possibilita explorar o interior de arrays e objetos exibindo ou iterando com suas propriedades. Ficou confuso ne?

Veja o exemplo, talvez fique mais claro

let arr = [3, 5, 7];
arr.foo = "hello";
for (let i in arr) {
 console.log(i); // logs "0", "1", "2", "foo"
}

For... of

Estou dando no em sua cabeça? Vai piorar... este laço For, faz uma repetição dentro do objeto, array, ou seja, trazendo seu conteúdo para uso no programa.

Como assim??? Veja o exemplo vai te ajudar.

let arr = [3, 5, 7];
for (let i of arr) {
 console.log(i); // logs "3", "5", "7"
}

Viu não era tao difícil assim...

Apresentei todos os laços de repetição ate o momento, lembre-se que a ECMA Internacional poderá criar uma nova em algum novo release.

Fugindo dos loops

Mas antes de terminarmos, faltou comentar sobre dois super mega poderosos comandos .

Break

Este comando encerra o loop e executa o próximo comando fora do LOOP. Ai esta ficando bem confuso este troço? Calma, vamos por partes como diria o Jack, estripador. Quando o IF for verdadeiro a repetição FOR é encerrada.

for (i = 0; i < Ct_Limite; i++) {
if (a[i] == theValue) {
  break;
}
}

Continue

O Continue é primo o break, mas seu funcionamento é inverso do Break, quando numa repetição e encontrado o Continue, o ponteiro do programa retorna para o início do loop, refazendo todos os comandos. Eita piorou? Calma tem exemplo.

i = 0;
n = 0;
while (i < 5) {
i++;
if (i == 3) {
  continue;
}
 Console.log(i); // exibe 1, 2, 4, 5
}

Conclusão

Espero ter ajudado ao parça fazendo esta breve introdução aos loops (laços de repetição), fazendo um pequeno resumo e dando exemplos práticos, caso surja alguma duvida, não se acanhe, pergunte aqui ou no discord. Lembre-se juntos somos mais fortes.

Caso interesse entre em nosso coding dojo de Javascript e faça os exercícios para aprimorar seus conhecimentos.

Lembre codificar é uma arte de raciocínio artesanal, cada programa reflete a alma do programador, apresentando soluções impares para problemas do cotidiano. Treine, brinque, experimente, descubra um mundo totalmente inusitado.

Espero ter ajudado.

Convido a conhecerem meu Github: https://github.com/VagnerBellacosa

Acompanhe meus bootcamps : https://github.com/VagnerBellacosa/DIO_Bootcamps

Coding Dojo

🚀 Coding Dojo

https://web.dio.me/articles/coding-dojo

Saiba como participar do Desafio 21 Dias 21 Artigos

🚀 Como fazer o Desafio 21 dias 21 artigos ? @Desafio21DiasNaDIO

https://web.dio.me/articles/desafio-21-dias-21-artigos-desafio21diasnadio

🚀 Vencendo o Desafio 21 dias 21 artigos.

https://web.dio.me/articles/vencendo-o-desafio-21-dias-21-artigos

Espero ter ajudado ate o próximo artigo.

 Referência Bibliográfica

WIKIPEDIA - A Enciclopédia Livre, faça parte, ajude actualizando ou criando verbetes http://www.wikipedia.org

Google Books um repositório com milhões de livros digitalizados https://books.google.com/

Internet Archive, tudo aquilo que um dia foi publicado veio parar aqui. https://archive.org/

Biblioteca de ícones https://www.flaticon.com/

 Mais momento jabá, uma jornada na marginal Pinheiros com tare caótica e muito transito, outrora foi a praia dos paulistanos, famílias fazia pic nics em suas margens, banhistas nadavam e curtiam dias de folga, mas a cidade foi crescendo, avenidas foram construídas, a poluição correu solta e destruiu toda a natureza, tornando o Rio Tiete, aquele que permitiu conquistar o Brasil a Oeste de Tordesilhas, enfeou-se, embruteceu e tornou-se na triste imagem que vemos em nossos dias, muito triste, pesaroso assim, visite meu vídeo e veja para onde fui desta vez: https://www.youtube.com/watch?v=o1cX434YwQk

Bom curso a todos.

 https://www.linkedin.com/in/vagnerbellacosa/

 https://github.com/VagnerBellacosa/

Pode me dar uma ajudinha no YouTube?

 https://www.youtube.com/user/vagnerbellacosa

 #Desafio21DiasNaDIO