Loops em JavaScript

Introdução aos Loops em JavaScript

Os loops em JavaScript são um conceito fundamental da programação que permite executar blocos de código várias vezes. Este guia fornece uma compreensão aprofundada dos diferentes tipos de loops em JavaScript, incluindo sua sintaxe e aplicações práticas.

O Que São Loops em JavaScript?

Um loop executa o mesmo bloco de código repetidamente enquanto uma condição permanece verdadeira. Cada passagem pelo corpo é chamada de iteração. Os loops permitem processar cada item de uma lista, repetir uma ação um número fixo de vezes ou continuar até que algum estado mude — tudo sem copiar e colar código.

Por Que Usar Loops?

Sem loops, você teria que escrever a mesma instrução uma vez para cada repetição:

console.log(1);
console.log(2);
console.log(3);
// ...and so on for every number

Um loop condensa isso em algumas linhas que funcionam para 3 números ou 3 milhões. O resultado é um código mais curto, mais fácil de alterar e muito menos propenso a erros.

Entendendo os Diferentes Tipos de Loops

Vamos mergulhar nos vários loops disponíveis em JavaScript, sua sintaxe e como usá-los de forma eficaz.

O Loop while

O loop while é o tipo mais simples de loop em JavaScript. Ele verifica a condição antes de cada iteração e continua executando enquanto essa condição for verdadeira. Use-o quando você não sabe com antecedência quantas vezes precisa repetir — por exemplo, lendo até encontrar um marcador de fim.

Sintaxe:

while (condition) {
  // code to be executed
}

Exemplo:

O corpo deve eventualmente tornar a condição falsa. Se nunca o fizer, você cria um loop infinito que trava a página. O i++ acima é o que garante que o loop termine — esqueça-o e i < 5 permanecerá verdadeiro para sempre.

O Loop do...while

O loop do...while verifica sua condição após cada iteração, portanto o corpo sempre é executado pelo menos uma vez — mesmo que a condição seja falsa desde o início. Isso é útil para prompts ou menus que devem aparecer pelo menos uma vez antes de decidir se deve repetir.

Sintaxe:

do {
  // code to be executed
} while (condition);

Exemplo:

O Loop for

O loop for é o loop mais utilizado. Ele reúne três partes em uma linha: uma inicialização (executada uma vez no início), uma condição (verificada antes de cada iteração) e uma expressão final (executada após cada iteração, geralmente para incrementar um contador). É a escolha natural quando você sabe quantas vezes deseja repetir.

Sintaxe:

for (initialization; condition; finalExpression) {
  // code to be executed
}

Exemplo:

O Loop for...in

Este loop itera sobre os nomes de propriedades (chaves) enumeráveis de um object. Use-o quando precisar das chaves de um object. Evite-o para arrays: ele produz índices do tipo string ("0", "1", …), não garante a ordem e também percorre propriedades herdadas — use for...of ou métodos de array em vez disso.

Sintaxe:

for (variable in object) {
  // code to be executed
}

Exemplo:

O Loop for...of

O loop for...of itera sobre os valores de objetos iteráveis, como arrays, strings, Map e Set. É a maneira mais limpa de percorrer elementos de um array quando você não precisa do índice. Lembre-se da diferença: for...in fornece chaves, for...of fornece valores.

Sintaxe:

for (variable of iterable) {
  // code to be executed
}

Exemplo:

Escolhendo o Loop Certo

Para a maioria dos trabalhos com array, você também vai encontrar métodos como forEach, map e filter (veja métodos de array) — geralmente são mais legíveis do que um loop manual.

Loops Aninhados

Um loop pode conter outro loop. O loop interno é executado completamente para cada passagem do loop externo, o que é útil para grids, tabelas e pares.

Controlando a Execução do Loop

Usando break em Loops

A instrução break pode ser usada para sair de um loop antes que a condição seja falsa.

Exemplo:

Usando continue em Loops

A instrução continue pula a iteração atual e continua com a próxima.

Exemplo:

Saindo de Loops Aninhados

Por padrão, o break sai apenas do loop mais interno. Para sair de um loop externo a partir de um interno, dê ao loop externo um rótulo e use break para ele.

Conclusão

Entender e usar efetivamente os diferentes tipos de loops em JavaScript melhora sua capacidade de escrever código conciso e eficiente. Escolha for quando você souber a contagem, while/do...while quando não souber, for...of para valores e for...in para chaves de object — e fique atento aos loops infinitos.

Continue com tópicos relacionados: operadores condicionais, arrays, métodos de array e funções.

Prática