Entendendo os Loops em JavaScript
JavaScript é uma das linguagens de programação mais populares no mundo. Desenvolvedores que desejam se especializar como engenheiros JavaScript devem dominar os fundamentos dos loops, suas variações e mecanismos.
Um loop em JavaScript é uma ferramenta essencial para realizar ações repetitivas com base em uma condição predefinida. A ‘iteração’, por outro lado, é um termo geral que se refere ao processo de repetição no contexto de um loop. Um loop continuará a iterar até que uma condição de parada seja satisfeita.
Para facilitar a compreensão, imagine um jogo de computador onde você recebe instruções para dar X passos para o norte e depois Y passos para a esquerda.
Para representar a ação de dar 7 passos para o norte, você poderia usar o seguinte código:
for (let passo = 0; passo < 7; passo++) {
// Executa 7 vezes, com valores de 'passo' de 0 a 6.
console.log("Caminhando um passo para o norte");
}
Ao executar este bloco de código, o resultado será a impressão da mensagem “Caminhando um passo para o norte” sete vezes no console.
Aplicações Comuns dos Loops
- Executar tarefas repetitivas: Loops são ideais para executar um conjunto de instruções várias vezes até que uma condição específica seja alcançada.
- Iterar sobre coleções de dados: Com loops, você pode percorrer os elementos de um array ou as propriedades de um objeto, permitindo realizar ações específicas em cada um deles.
- Filtrar dados: Loops são úteis para selecionar dados com base em critérios definidos, permitindo a manipulação e extração de informações relevantes.
Em JavaScript, os loops vêm em diversas formas: `for`, `while`, `do…while`, `for…of` e `for…in`. Vamos analisar cada um deles detalhadamente para entender suas particularidades e usos.
O Loop ‘for’
O loop `for` repete um bloco de código até que uma condição seja avaliada como falsa. Ele consiste em três expressões opcionais, seguidas pelo bloco de código a ser repetido.
for (inicialização; condição; expressãoFinal) {
// código a ser executado
}
- A expressão de inicialização é executada apenas uma vez, antes da primeira iteração do loop. Geralmente, ela é usada para inicializar uma ou mais variáveis de controle.
- A expressão de condição é verificada antes de cada iteração do loop. Se a condição for verdadeira, o código dentro do loop é executado. Caso contrário, o loop é encerrado. Se a condição for omitida, ela é considerada verdadeira, gerando um loop infinito (se não houver outras formas de sair).
- A expressão final é executada após cada iteração do loop. Ela é frequentemente usada para incrementar ou decrementar o valor da variável de controle.
Você pode usar um bloco de código `{}` para agrupar várias instruções dentro do loop. Se precisar interromper a execução do loop antes que a condição seja avaliada como falsa, você pode usar a instrução `break`.
Exemplos Práticos do Loop ‘for’
- Exemplo de iteração usando o loop `for`:
for (let i = 0; i < 7; i++) {
console.log(i);
}
Neste exemplo:
- A variável `i` é inicializada com o valor 0.
- A condição para que o loop continue é que `i` seja menor que 7.
- O loop se repete enquanto o valor de `i` for menor que 7.
- Após cada iteração, o valor de `i` é incrementado em 1.
for (let i = 1; i < 11; i += 2) {
if (i === 9) {
break;
}
console.log('Total de desenvolvedores: ' + i);
}
- Este loop itera de 1 até 10 (i < 11).
- A variável `i` é inicializada com o valor 1.
- O loop continua enquanto `i` for menor que 11.
- O valor de `i` aumenta de 2 em 2 a cada iteração.
Neste caso, quando o valor de `i` se torna igual a 9, a instrução `break` é executada e o loop termina.
(imagem)
O Loop ‘for…of’
O loop `for…of` é utilizado para iterar sobre objetos iteráveis, como arrays, mapas, sets, argumentos e strings. Ele executa um bloco de código para cada valor distinto presente no objeto iterável.
A estrutura básica de um loop `for…of` é:
for (variável of objeto)
instrução
Exemplos Práticos do Loop ‘for…of’
- Iterando sobre um array com o loop `for…of`:
const linguagensFrontend = ["HTML", "CSS", "JavaScript", "React"];
for (let linguagem of linguagensFrontend) {
console.log(linguagem);
}
Neste código:
- Definimos um array chamado `linguagensFrontend`.
- O array contém quatro elementos: “HTML”, “CSS”, “JavaScript” e “React”.
- O loop `for…of` itera sobre cada elemento do array.
- A variável `linguagem` recebe o valor de cada elemento durante cada iteração e este valor é impresso no console.
const s = new Set();
s.add(2);
s.add("cinza");
for (let n of s) {
console.log(n);
}
Neste bloco de código:
- Declaramos uma variável `s` e a inicializamos com um novo Set.
- Adicionamos dois elementos ao Set usando o método `add()`.
- O loop `for…of` itera sobre os elementos do Set.
- A variável `n` recebe o valor do elemento atual em cada iteração e este valor é impresso no console.
const m = new Map();
m.set(4, "coelho");
m.set(6, "macaco");
m.set(8, "elefante");
m.set(10, "leão");
m.set(12, "leopardo");
for (let n of m) {
console.log(n);
}
Neste exemplo:
- Usamos o construtor `Map()` para criar um novo objeto Map.
- Declaramos uma variável `m`.
- Adicionamos cinco pares chave-valor usando o método `.set()`.
- O loop `for…of` itera sobre os elementos do objeto Map `m`.
O Loop ‘for…in’
O loop `for…in` é usado para iterar sobre as propriedades enumeráveis de um objeto. A estrutura básica do loop `for…in` é:
for (propriedade in objeto) {
// código a ser executado
}
O loop `for…in` também pode ser usado para iterar sobre arrays e objetos similares a arrays.
const listaCompras = { couve: 4, tomates: 2, repolho: 0, alface: 6, abobora: 5 };
for (const vegetal in listaCompras) {
console.log(vegetal);
}
Neste código:
- Criamos um objeto JavaScript chamado `listaCompras`.
- Usamos o loop `for…in` para percorrer cada propriedade em `listaCompras`.
- A cada iteração, o loop atribui o nome da propriedade atual em `listaCompras` à variável `vegetal`.
O Loop ‘while’
O loop `while` executa um bloco de código repetidamente enquanto uma condição especificada for verdadeira. Assim que a condição se tornar falsa, o loop é encerrado e o bloco de código não será mais executado.
A estrutura básica de um loop `while` é:
while (condição)
instrução
A condição é verificada antes de cada iteração. Se for verdadeira, o código dentro do loop é executado. Se for falsa, o loop termina. Para executar várias instruções, use um bloco de código `{}`.
Exemplo Prático do Loop ‘while’
let n = 0;
while (n < 9) {
console.log(n);
n++;
}
Neste código:
- A variável `n` é inicializada com o valor zero.
- O loop continua a ser executado enquanto o valor de `n` for menor que 9.
- O valor de `n` é exibido no console e incrementado em 1 a cada iteração.
- O código para de ser executado quando `n` atinge o valor 8.
O Loop ‘do…while’
O loop `do…while` é similar ao loop `while`, mas garante que o código dentro do loop seja executado pelo menos uma vez, independentemente da condição. A condição é avaliada após a primeira execução.
A estrutura geral de um loop `do…while` é:
do
instrução
while (condição);
A instrução é executada uma vez antes da condição ser verificada. Se a condição for verdadeira, a instrução é executada novamente. Se for falsa, a execução do loop é interrompida e o controle passa para a instrução seguinte ao loop `do…while`.
Exemplo do Loop ‘do…while’
let n = 0;
do {
n += 1;
console.log(n);
} while (n < 7);
Neste exemplo:
- Inicializamos a variável `n` com o valor 0.
- A variável `n` entra em um loop `do…while`, onde seu valor é incrementado em 1 a cada iteração.
- O valor atual de `n` é registrado no console.
- O loop continua a executar enquanto o valor de `n` for menor que 7.
Ao executar este código, os valores de `n` de 1 a 7 serão impressos no console, mostrando que o loop foi executado 7 vezes.
Loops Aninhados
Um loop aninhado ocorre quando um loop é colocado dentro de outro loop. Por exemplo, um loop `for` dentro de outro loop `for`.
for (let externo = 0; externo < 5; externo += 2) {
for (let interno = 0; interno < 6; interno += 2) {
console.log(`${externo}-${interno}`);
}
}
- Existem duas variáveis: `externo` e `interno`, ambas inicializadas com o valor zero.
- As duas variáveis são incrementadas de 2 em 2 a cada iteração.
- Tanto o loop externo quanto o interno iteram três vezes cada.
Instruções de Controle de Loop
Instruções de controle de loop, também chamadas de “instruções de salto”, são usadas para modificar o fluxo normal de um loop. `break` e `continue` são exemplos de instruções de controle de loop.
Instruções ‘break’
A instrução `break` encerra um loop imediatamente, mesmo que a condição do loop ainda não tenha sido satisfeita.
for (let n = 1; n <= 26; n++) {
if (n === 13) {
console.log("O loop para aqui. Atingimos a instrução break");
break;
}
console.log(n);
}
O resultado da execução deste código será:
Instruções ‘continue’
A instrução `continue` é usada para pular a execução do código atual dentro do loop e prosseguir para a próxima iteração do loop.
for (let n = 0; n <= 10; n++) {
if (n === 5) {
continue;
}
console.log(n);
}
O resultado da execução deste código será:
Conclusão
Neste artigo, exploramos os tipos mais comuns de loops encontrados em JavaScript e suas variações. Cada tipo de loop tem seu próprio caso de uso e comportamento. Escolher o tipo de loop inadequado pode levar a erros inesperados no seu código.
Ao trabalhar com frameworks ou bibliotecas JavaScript, é essencial consultar a documentação específica e usar os loops apropriados para a situação.