Processamento de repetição em JavaScript

Neste artigo, explicaremos o processamento de repetição em JavaScript.

YouTube Video

A instrução for em JavaScript

Sintaxe Básica

1for (initialization; condition; update) {
2  // Code to repeat
3}

A instrução for em JavaScript é uma sintaxe para realizar iterações. Ela executa repetidamente um bloco de código especificado enquanto uma determinada condição for atendida. Ao usar a instrução for, o mesmo processo pode ser executado de maneira eficiente várias vezes.

• Inicialização (initialization): A parte que é executada apenas uma vez antes de começar o loop. Inicialize variáveis, como o contador do loop.
• Condição (condition): A condição que determina se o loop deve continuar. Se for true, o loop continua; se for false, ele termina.
• Atualização (update): Isso é executado no final de cada iteração do loop para atualizar o contador.

Exemplo

1for (let i = 0; i < 5; i++) {
2    console.log(i);
3}

Neste caso, i começa em 0, e o loop é executado enquanto i < 5 for true. i++ incrementa i em 1 a cada iteração do loop. Como resultado, os números de 0 a 4 são exibidos.

Escopo do contador de loop

Declare ou inicialize variáveis na parte de inicialização da instrução for. As variáveis declaradas aqui são válidas apenas dentro do loop.

1for (let i = 0; i < 3; i++) {
2    console.log(i); // Outputs 0, 1, 2
3}
4console.log(i);  // ReferenceError

• Como mostrado neste exemplo, referenciar uma variável fora da instrução for resultará em um erro.

Loop infinito

Definir uma condição que não termina o loop resulta em um loop infinito. Isso pode sobrecarregar o navegador ou o sistema, então é preciso cautela.

1for (;;) {
2    console.log("Infinite loop");
3    break; // Exits the infinite loop with break
4}

Arrays e a instrução for

É comum usar a instrução for em conjunto com arrays. É conveniente para processar cada elemento de um array.

Exemplo

1let fruits = ["apple", "banana", "cherry"];
2
3for (let i = 0; i < fruits.length; i++) {
4    console.log(fruits[i]);
5}
6// Outputs "apple", "banana", "cherry"

Dessa forma, é possível processar cada elemento de um array usando índices.

Outras Estruturas de Loop

Declaração for...of

A declaração for...of é usada para objetos iteráveis como arrays e strings.

1let fruits = ["apple", "banana", "cherry"];
2
3for (let fruit of fruits) {
4    console.log(fruit);
5}
6// Outputs "apple", "banana", "cherry"

Isso permite processar cada elemento sem usar índices.

Declaração for...in

A declaração for...in é usada para iterar sobre as propriedades de um objeto.

1let person = { name: "John", age: 30, city: "Tokyo" };
2
3for (let key in person) {
4    console.log(key + ": " + person[key]);
5}
6// Outputs "name: John", "age: 30", "city: Tokyo"

Dessa forma, é possível realizar operações em cada elemento usando as chaves.

Resumo

• A declaração for é uma estrutura de loop com três partes: inicialização, condição e atualização.
• É possível controlar o comportamento dos loops usando break ou continue.
• Quando combinada com arrays ou objetos, os elementos ou propriedades podem ser processados de forma eficiente.

A Declaração while no JavaScript

Sintaxe Básica

1while (condition) {
2    // Code that repeats while the condition is true
3}

A declaração while no JavaScript é uma estrutura de loop que executa operações repetidas enquanto a condição especificada for true. Semelhante à declaração for, a declaração while apenas especifica a condição.

• Condição: Escreva a expressão condicional que determina se o loop deve continuar. O loop continua enquanto for true e termina quando se tornar false.

Exemplo

1let i = 0;
2
3while (i < 5) {
4    console.log(i);
5    i++;
6}
7console.log(i);  // 5

Neste exemplo, o loop começa com a variável i em 0 e executa enquanto i < 5 for true. A cada iteração do loop, i é incrementado em 1 e, quando i se torna 5, a condição torna-se false e o loop termina. Como resultado, a declaração while exibe de 0 a 4.

Diferentemente da declaração for, na declaração while, a inicialização e a atualização de variáveis são escritas como declarações separadas. É possível também acessar a variável após a declaração while. Neste caso, 5 é exibido após o término da declaração while.

Loop infinito

Se a condição for sempre true, ocorre um loop infinito que não termina. Loops infinitos devem ser evitados, mas, se usados intencionalmente, é possível encerrá-los com uma declaração break.

Exemplo

1while (true) {
2    console.log("Infinite loop");
3    break;  // Ends the loop with `break`
4}

Processando Arrays com um Loop while

Também é possível processar arrays com uma instrução while.

Exemplo

1let fruits = ["apple", "banana", "cherry"];
2let i = 0;
3
4while (i < fruits.length) {
5    console.log(fruits[i]);
6    i++;
7}
8// Outputs "apple", "banana", "cherry"

Instrução do...while

Sintaxe Básica

1do {
2    // Code that is executed at least once
3} while (condition);

A instrução do...while, uma variante da instrução while, verifica a condição após executar o loop pelo menos uma vez. Enquanto a instrução while verifica a condição primeiro, a instrução do...while executa o processo uma vez antes de verificar a condição.

Exemplo

1let i = 0;
2
3do {
4    console.log(i);
5    i++;
6} while (i < 5);

Neste exemplo, i é exibido de 0 a 4. A instrução do...while difere da instrução while, pois sempre é executada uma vez, mesmo que a condição seja false.

Resumo

• A instrução while é usada para executar o código repetidamente enquanto a condição for true.
• Tenha cuidado com loops infinitos, mas você pode controlar o fluxo de loops usando break e continue.
• A instrução do...while é útil quando você deseja executar o loop pelo menos uma vez.

break e continue

Você pode usar break e continue dentro do loop.

• break é usado para terminar o loop prematuramente.
• continue pula a iteração atual e avança para a próxima iteração.

Exemplo de break

 1for (let i = 0; i < 10; i++) {
 2    if (i === 5) {
 3        break;  // Exits the loop when i is 5
 4    }
 5    console.log(i);
 6}
 7// Outputs 0, 1, 2, 3, 4
 8
 9let i = 0;
10
11while (i < 10) {
12    if (i === 5) {
13        break;  // Ends the loop when i is 5
14    }
15    console.log(i++);
16}
17// Outputs 0, 1, 2, 3, 4

Neste caso, break é executado quando i se torna 5. Como resultado, os números de 0 a 4 são exibidos.

Exemplo de continue

 1for (let i = 0; i < 5; i++) {
 2    if (i === 2) {
 3        continue;  // Skips when i is 2
 4    }
 5    console.log(i);
 6}
 7// Outputs 0, 1, 3, 4
 8
 9let i = 0;
10while (i < 5) {
11    i++;
12    if (i === 3) {
13        continue;  // Skips when i is 3
14    }
15    console.log(i);
16}
17// Outputs 1, 2, 4, 5

Neste caso, continue é executado quando i é 2. Como resultado, números diferentes de 2 são exibidos.

Loops Aninhados em JavaScript

Na programação JavaScript, um loop aninhado é uma estrutura onde um loop existe dentro de outro. Esses loops são muito eficazes quando algoritmos ou processos específicos abrangem várias dimensões ou camadas. Por exemplo, processar um array multidimensional com arrays dentro de arrays é um caso típico.

Aqui, explicaremos a estrutura básica dos loops aninhados, exemplos de uso, precauções e considerações de otimização.

Estrutura Básica dos Loops Aninhados

A estrutura básica de um loop aninhado é uma forma onde um ou mais loops estão contidos dentro de outro loop. Toda vez que o loop externo é executado uma vez, o loop interno é executado esse mesmo número de vezes.

Abaixo está um exemplo básico de dois loops aninhados.

 1for (let i = 0; i < 3; i++) {
 2    console.log(`Outer loop iteration: ${i}`);
 3
 4    for (let j = 0; j < 2; j++) {
 5        console.log(`  Inner loop iteration: ${j}`);
 6    }
 7}
 8// Output:
 9// Outer loop iteration: 0
10//   Inner loop iteration: 0
11//   Inner loop iteration: 1
12// Outer loop iteration: 1
13//   Inner loop iteration: 0
14//   Inner loop iteration: 1
15// Outer loop iteration: 2
16//   Inner loop iteration: 0
17//   Inner loop iteration: 1

No código acima, i é contado no loop externo, e j é contado no loop interno. Toda vez que o loop externo é executado uma vez, o loop interno é executado duas vezes.

Exemplo Prático de Loops Aninhados

Loops aninhados são particularmente úteis para lidar com arrays multidimensionais. Por exemplo, ao processar um array bidimensional, é necessário lidar tanto com as linhas (loop externo) quanto com as colunas (loop interno).

No exemplo a seguir, lidamos com um array bidimensional e imprimimos cada elemento.

 1const matrix = [
 2  [1, 2, 3],
 3  [4, 5, 6],
 4  [7, 8, 9]
 5];
 6
 7for (let row = 0; row < matrix.length; row++) {
 8    for (let col = 0; col < matrix[row].length; col++) {
 9        console.log(`Element at [${row}][${col}] is: ${matrix[row][col]}`);
10    }
11}
12// Output:
13// Element at [0][0] is: 1
14// Element at [0][1] is: 2
15// Element at [0][2] is: 3
16// Element at [1][0] is: 4
17// Element at [1][1] is: 5
18// Element at [1][2] is: 6
19// Element at [2][0] is: 7
20// Element at [2][1] is: 8
21// Element at [2][2] is: 9

Dessa forma, usar loops aninhados permite acessar cada elemento de um array bidimensional.

Notas

Há alguns pontos a serem observados ao usar loops aninhados.

1. Problemas de Desempenho

   À medida que os loops aninhados se aprofundam, o tempo de execução aumenta drasticamente. Por exemplo, se o loop externo for executado 100 vezes e o loop interno 100 vezes, um total de 10.000 operações serão realizadas. Portanto, se houver muitas iterações de loops, você deve considerar a otimização dos loops para eficiência.

2. Aplicação a Algoritmos Complexos

   Loops aninhados são muito poderosos, mas à medida que o processamento se torna complexo, o código pode ficar difícil de entender. Portanto, para manter a legibilidade do código, é importante organizar o processamento com comentários e funções apropriados.

Considerações de Otimização

Ao usar loops aninhados, as seguintes otimizações podem ser consideradas.

1. Término Antecipado do Loop

   Se uma condição específica for atendida dentro do loop, você pode usar a instrução break para sair do loop. Isso pode evitar loops desnecessários e melhorar o desempenho.

1for (let i = 0; i < 5; i++) {
2    for (let j = 0; j < 5; j++) {
3        if (i + j > 5) {
4            break;
5        }
6        console.log(`i: ${i}, j: ${j}`);
7    }
8}

2. Mover Cálculos para Fora

   Em vez de realizar o mesmo cálculo dentro do loop a cada vez, você pode realizá-lo uma vez fora do loop e usar o resultado para tornar o processo mais eficiente.

 1let array = [1, 2, 3, 4, 5];
 2
 3// Inefficient example (calculating every time)
 4for (let i = 0; i < array.length; i++) {
 5    for (let j = 0; j < array.length; j++) {
 6        let sum = array[i] + array[j];
 7        console.log(sum);
 8    }
 9}
10
11// Efficient example (calculating outside)
12let arrayLength = array.length;
13for (let i = 0; i < arrayLength; i++) {
14    for (let j = 0; j < arrayLength; j++) {
15        let sum = array[i] + array[j];
16        console.log(sum);
17    }
18}

Resumo

Os loops aninhados são muito úteis para lidar com estruturas de dados complexas e algoritmos em JavaScript. No entanto, se não forem usados corretamente, podem causar degradação de desempenho e reduzir a legibilidade do código. Para usar loops aninhados de forma eficaz, é importante buscar a otimização dos loops e a organização do código, além de adotar abordagens apropriadas dependendo da situação.

Você pode acompanhar o artigo acima usando o Visual Studio Code em nosso canal do YouTube. Por favor, confira também o canal do YouTube.

YouTube Video