Loops e Interações (Loops and Interactions)

Olá HaWkers, esse é o quarto artigo da nossa série de artigos que vão cobrir o aprofundamento do nosso Roadmap JavaScript - TUDO o que você precisa Aprender 🦅. Se você não sabe do que eu estou falando, clique no link anterior.

Bom, vamos começar!

Laços de repetição, ou loops, são estruturas que permitem repetir um bloco de código diversas vezes, economizando linhas e facilitando a manutenção do código. Neste artigo, vamos aprofundar nos principais tipos de loops disponíveis no JavaScript e como utilizá-los eficientemente.

Laço de Repetição For

O loop for é uma das estruturas mais utilizadas em programação. Com ele, é possível definir a inicialização, a condição de parada, e a iteração em uma única linha. Vamos explorar suas nuances e características, mas antes porque ele é importante?

// Ao invés de escrever isso:text += cars[0] + '<br>';text += cars[1] + '<br>';text += cars[2] + '<br>';text += cars[3] + '<br>';text += cars[4] + '<br>';text += cars[5] + '<br>';

Essa é a sintax básica do Loop for:

for (expression 1; expression 2; expression 3) {  // código do bloco a ser executado}

E sabendo disso você pode escrever da seguinte forma:

// Você pode escrever isso:for (let i = 0; i < cars.length; i++) {  text += cars[i] + '<br>';}

For Loop com Objetos

Além de arrays, também podemos usar loops for para iterar através das propriedades de um objeto. Utilizando o loop for...in, podemos navegar por todas as propriedades enumeráveis de um objeto.

const objeto = { a: 1, b: 2, c: 3 };for (const prop in objeto) {  console.log(`objeto.${prop} = ${objeto[prop]}`);}// Saída:// objeto.a = 1// objeto.b = 2// objeto.c = 3

Laço de Repetição For...of

O loop for...of facilita a iteração através de objetos iteráveis, como arrays e strings, sem a necessidade de se preocupar com índices. Vamos ver como funciona:

const array = [1, 2, 3, 4, 5];for (const valor of array) {  console.log(valor);}// Saída:// 1// 2// 3// 4// 5

Laço de Repetição While

O loop while cria uma iteração que continua enquanto a condição definida for verdadeira. Ele é extremamente útil em situações onde não sabemos quantas vezes precisaremos iterar.

Essa é a sintax do laço de repetição while:

while (condição) {  rotina;}

E esse um exemplo de como usar:

let n = 0;let x = 0;while (n < 3) {  n++;  x += n;}console.log(x); // 6

Loop Infinito: Uma Armadilha a Ser Evitada

Enquanto os loops são ferramentas poderosas, eles também podem ser armadilhas perigosas. Um loop infinito pode travar seu programa, criando uma operação que nunca termina.

// ATENÇÃO: Este é um exemplo de um loop infinito. Não execute esse código!while (true) {  console.log('Este é um loop infinito!');}

Explorar condições de saída adequadas e evitar a criação inadvertida de loops infinitos é vital para escrever código robusto e eficiente.

Laço de Repetição Do-While

Semelhante ao while, o loop do-while garante que o bloco de código seja executado pelo menos uma vez, independentemente da condição, verificando-a apenas no final de cada iteração.

Essa é a sintaxe do do-white:

do statement;while (condition);

E esse é um exemplo de como utilizar:

let result = '';let i = 0;do {  i = i + 1;  result = result + i;} while (i < 5);console.log(result);// Saída: "12345"

Loop com Array

Arrays e loops são parceiros inseparáveis na programação. Ao trabalhar com arrays no JavaScript, temos diversas maneiras de iterar sobre eles, como utilizando os métodos map, filter, e reduce, que facilitam a manipulação de arrays de maneira funcional e declarativa. Mas também existe uma outra forma, que provavelmente é a mais usada, que é o famoso forEach:

forEach

A iteração forEach é uma função de alta ordem específica para arrays. Ela permite iterar sobre cada elemento de um array de forma simplificada, sem a necessidade de controlar manualmente os índices.

Essa é a sintaxe do forEach

arr.forEach(callback(currentValue [, index [, array]])[, thisArg]);

E aqui um exemplo de como utilizá-lo:

const array = ['a', 'b', 'c'];array.forEach(element => console.log(element));// Saída esperada: "a"// Saída esperada: "b"// Saída esperada: "c"

Utilizando Loops com Métodos de String

Loops não são apenas para números ou arrays; eles também podem ser usados com strings! Podemos, por exemplo, iterar sobre cada caractere de uma string usando um loop for.

const texto = 'HaWkers';for (let i = 0; i < texto.length; i++) {  console.log(texto[i]);}// Saída:// H// a// W// k// e// r// s

Usando Loops com Funções Assíncronas

Às vezes, pode ser necessário usar loops com funções assíncronas, e o JavaScript moderno nos permite fazer isso elegantemente com a ajuda de async/await. Vejamos um exemplo:

const tarefas = [1, 2, 3, 4, 5].map(n => async () => {  console.log(`Iniciando tarefa ${n}`);  await new Promise(res => setTimeout(res, 1000));  console.log(`Completando tarefa ${n}`);});for (const tarefa of tarefas) {  await tarefa();}// Saída (com um intervalo de 1 segundo entre cada conjunto de logs):// Iniciando tarefa 1// Completando tarefa 1// ...// Iniciando tarefa 5// Completando tarefa 5

Nota: Este código deve ser executado em um ambiente que suporte async/await, e dentro de uma função assíncrona.

Keyword continue dentro de Loops

A palavra-chave continue permite pular a iteração atual de um loop, continuando diretamente para a próxima iteração. É uma ferramenta valiosa para evitar a execução de código desnecessário em situações específicas dentro de um loop.

Vamos observar um exemplo onde queremos logar apenas números ímpares de um array:

for (let i = 0; i <= 10; i++) {  if (i % 2 === 0) {    continue;  }  console.log(i);}// Saída:// 1// 3// 5// 7// 9

Neste exemplo, estamos usando o continue para pular a execução do código para números pares, logando apenas os números ímpares.

Keyword break dentro de Loops

A palavra-chave break, por outro lado, permite sair completamente de um loop, interrompendo todas as iterações futuras. Ela é utilizada para otimizar o código, evitando execuções desnecessárias quando já alcançamos o resultado desejado.

Vamos conferir isso em ação:

for (let i = 0; i <= 10; i++) {  if (i === 5) {    break;  }  console.log(i);}// Saída:// 0// 1// 2// 3// 4

Neste exemplo, o loop é interrompido assim que i se torna 5, evitando iterações desnecessárias e saindo do loop mais cedo.

Laços Aninhados

Laços aninhados são loops colocados dentro de outros loops. Apesar de poderosos, eles devem ser utilizados com cuidado, pois podem facilmente levar a problemas de performance, especialmente quando trabalhamos com grandes conjuntos de dados.

Vejamos como podemos usar laços aninhados para criar uma matriz de multiplicação:

for (let i = 1; i <= 3; i++) {  for (let j = 1; j <= 3; j++) {    console.log(`Resultado da multiplicação de ${i} e ${j} é: ${i * j}`);  }}// Saída:// Resultado da multiplicação de 1 e 1 é: 1// Resultado da multiplicação de 1 e 2 é: 2// ...// Resultado da multiplicação de 3 e 3 é: 9

Aqui, temos dois loops: um para i e outro para j. Isso nos permite multiplicar cada combinação de i e j, criando uma tabela de multiplicação.

Loops e Recursão

Às vezes, podemos usar a recursão, um processo em que uma função se chama, como uma alternativa aos loops. A recursão pode oferecer soluções mais limpas e mais fáceis de entender para problemas complexos.

function contagemRegressiva(n) {  if (n <= 0) {    console.log('Feito!');    return;  }  console.log(n);  contagemRegressiva(n - 1);}contagemRegressiva(3);// Saída:// 3// 2// 1// Feito!

Loops e Manipulação de DOM

Os loops podem ser uma ferramenta poderosa quando combinados com a manipulação do DOM em desenvolvimento web. Abaixo, vamos iterar sobre uma lista de elementos DOM e alterar seu conteúdo:

const itensLista = document.querySelectorAll('li');for (const [index, item] of itensLista.entries()) {  item.textContent = `Item número ${index + 1}`;}

Construindo Animações com Loops

Podemos utilizar loops para criar animações dinâmicas em nossas páginas web. Aqui está um exemplo simples usando um loop for para animar a mudança de cor de fundo de um elemento:

const elemento = document.querySelector('.meu-elemento');for (let i = 0; i <= 100; i++) {  setTimeout(() => {    elemento.style.backgroundColor = `rgba(255,0,0,${i / 100})`;  }, i * 100);}// Neste código, o elemento '.meu-elemento' mudará gradualmente sua cor de fundo para vermelho ao longo de 10 segundos.

Conclusão

Pois bem HaWkers, como vocês podem perceber, dominar os laços de repetição é fundamental para qualquer desenvolvedor JavaScript. Eles oferecem uma maneira poderosa e flexível de iterar sobre conjuntos de dados, executar código repetitivo e criar algoritmos mais complexos e eficientes. Espero que este guia ajude você a entender melhor e a utilizar essas estruturas de controle essenciais no seu dia a dia como programador.

Voltar para o Roadmap JavaScript - TUDO o que você precisa Aprender 🦅.

Bora pra cima! 🦅