Loops no Javascript

Tempo de leitura: 4 minutos

Loops no Javascript: Em programação, o conceito de Loop é fundamental. Essas estruturas de controle permitem que um bloco de código seja executado repetidamente enquanto uma condição Booleana for verdadeira. Os loops automatizam tarefas, processam coleções de dados e evitam a repetição manual de código.

Em JavaScript, dividimos os loops em duas categorias principais: Controladores de Contagem/Condição e Iteradores de Coleção.

1. Loops Clássicos: Controlando a Contagem ou Condição

Estes loops exigem que o desenvolvedor gerencie a condição e a variável de controle manualmente.

A. `for`: Para Contagens Conhecidas

O for é o loop mais comum, usado quando se sabe o número exato de repetições. A lógica de controle é condensada em três partes no cabeçalho:

Inicialização: Define a variável de controle (Ex: let i = 0).
Condição: A regra para continuar (Ex: i < 10).
Incremento/Decremento: Atualiza a variável após cada iteração (Ex: i++).

JavaScript

for (let i = 0; i < 5; i++) {
  console.log("Iteração: " + i); 
}

B. `while`: Para Condições Flexíveis

O while executa o bloco enquanto a condição for verdadeira. É ideal quando o número de repetições é desconhecido e depende de fatores externos (Ex: leitura de um arquivo, interação com o usuário).

Atenção: Você deve garantir que a condição se torne falsa dentro do bloco para evitar um loop infinito.

JavaScript

let contador = 0;
while (contador < 3) {
  console.log("Passo: " + contador);
  contador++; // A instrução de mudança é manual
}

C. `do...while`: Execução Garantida

Semelhante ao while, mas a condição é verificada após a primeira execução. Isso garante que o bloco de código seja executado pelo menos uma vez.

JavaScript

let i = 10;
do {
  console.log("Eu rodo primeiro.");
  i++;
} while (i < 5); // Condição falsa, mas executou uma vez.

2. Iteradores Modernos: Simplificando Coleções

Estes loops foram introduzidos para tornar a iteração sobre coleções (Arrays e Objetos) mais limpa e menos propensa a erros de índice.

A. `for...of`: Iterando Valores (Arrays, Strings)

O for...of itera diretamente sobre os valores dos elementos de qualquer objeto iterável (como Arrays, Strings e Mapas).

JavaScript

let frutas = ["maçã", "banana"];

// Itera sobre o VALOR do elemento
for (const fruta of frutas) {
  console.log("Comprando: " + fruta); 
}

B. `for...in`: Iterando Chaves (Objetos)

O for...in itera sobre as chaves (nomes das propriedades) de um objeto.

JavaScript

let pessoa = { nome: "Ana", idade: 30 };

// Itera sobre as CHAVES ('nome', 'idade')
for (let chave in pessoa) {
  // Acesso ao valor da propriedade via notação de colchetes
  console.log(chave + ": " + pessoa[chave]); 
}

Dica: Para iterar sobre arrays, prefira for...of ou o método de array forEach(). O for...in é mais adequado e seguro para a iteração de propriedades de objetos.

3. Controle de Loops

Dois comandos são usados para modificar o fluxo de execução dentro de um loop:

break: Interrompe o loop imediatamente e continua a execução do código após o loop.
continue: Pula a iteração atual e avança para a próxima iteração.

JavaScript

for (let i = 0; i < 10; i++) {
  if (i === 5) {
    continue; // Pula o console.log() para i=5
  }
  if (i === 8) {
    break; // Sai completamente do loop
  }
  console.log(i); // Imprime 0, 1, 2, 3, 4, 6, 7
}

✅ Conclusão Loops no Javascript

Loops no Javascript: As estruturas de repetição são cruciais para a automação e o processamento de dados em JavaScript. Ao escolher o loop correto — for para contagens fixas, while para condições variáveis, for...of para iterar valores de coleções, e for...in para chaves de objetos — você escreve código mais limpo, eficiente e que atende precisamente à sua necessidade de repetição.

Toda jornada tem um início, e o início para se tornar um desenvolvedor web é dominar as seguintes tecnologias, que você encontra aqui mesmo: