9 - Explorando mais sobre os métodos de iteração em JavaScript

Ao programar em JavaScript, é essencial entender as diferentes formas de iterar sobre arrays e outros iteráveis. Neste capítulo, vamos conhecer mais sobre os métodos tradicionais de loop, como for e while, bem como métodos de iteração modernos, como forEach e for...of. Além disso, reforçaremos as discussões sobre o uso de instruções de controle, como break, continue e return, para controlar o fluxo de execução dentro de loops.

9.1 For

O for é o método tradicional de loop, oferecendo acesso a cada elemento, ao contador do loop e controle sobre cada operação.

const fruits = ['Apple', 'Banana', 'Cherry'];
for (let i = 0; i < fruits.length; i++) {
  console.log(`Fruit ${i}: ${fruits[i]}`);
}
// Saída: Fruit 0: Apple, Fruit 1: Banana, Fruit 2: Cherry

Esse loop for itera sobre um array de strings, baseado no valor da quantidade total de itens do array, identificado pela propriedade length e passando por todos os itens no raio de zero indicado no i = 0, até a quantidade máxima de itens do array, exibindo cada string junto com seu índice no console.

9.2 While

O loop while é útil quando a duração do loop depende de uma condição dinâmica. Ele continua funcionando enquanto a condição for verdadeira.

const fruits = ['Apple', 'Banana', 'Cherry'];
let i = 0;
while (i < fruits.length) {
  console.log(fruits[i]);
  i++;
}
// Saída: Apple, Banana, Cherry

Aqui utilizamos o loop while para iterar sobre um array de strings, similar ao anterior feito com for, entanto aqui não temos o número do índice para apresentar. Indicando novamente o indice começando com valor 0, i = 0, e passando por todos os itens da lista até o indice tomar o valor igual a quantidade máxima de itens do array em questão, indicado pela propriedade length.

Um ponto importante é atenção é não criar loops infinitos, que podem continuar rodando indefinidamente e causar problemas de performance no código, como no exemplo abaixo.

const i = 3;
while (i < 4) {
  console.log("Loop infinito rodando...");
}
// Saída: Loop infinito rodando...

9.3 ForEach

O método forEach é uma maneira popular e legível de iterar sobre arrays, executando uma função para cada elemento.

const fruits = ["apple", "banana", "cherry"];

fruits.forEach(function(fruit) {
  console.log(fruit);
});
// Saída: Apple, Banana, Cherry

Aqui trabalhamos com o loop for each na mesma listagem de strings do exemplo anterior, obtendo o resultado de cada um de seus valores impressos no console. Neste caso o não é necessário indicar o valor do índice como sendo zero ou utilizar a propriedade length para controlar o loop, pois o for each já cuida desses pontos.

9.4 Break, Continue e Return

O método forEach não suporta instruções de controle tradicionais como break ou return. No entanto, em loops tradicionais, break e continue são úteis para modificar o fluxo de execução.

const numbers = [1, 2, 3, 4, 5];

numbers.forEach(number => {
  if (number > 3) {
    break; 
    // Saída: Uncaught SyntaxError: Illegal break statement
  }
  console.log(number);
});

for(let i = 10; i > 0; i--) {
  if(i === 4) {
    continue;
  }
  if(i === 2) {
    break;
  }
  console.log(i); 
  // Saída 10, 9, 8, 7, 6, 5, 3
}

No exemplo acima, utilizando o loop for para contar de 10 a 1, excluindo os números 4 e 2 utilizando o continue, que pulará a impressão do 4 e o break, que pulará a impressão do 2, e imprimir os números restantes no console.

9.5 Return

O Return interrompe apenas a iteração atual em forEach, não afetando o restante do loop como um todo.

const numbers = [1, 2, 3, 4, 5];

numbers.forEach(number => {
  if (number === 3) {
    return; 
    // Sai apenas da iteração atual
  }
  console.log(number);
});
// Saída: 1, 2, 4, 5

Nesse contexto, o return interrompe o loop do código quando o valor da listagem é igual ao número 3, quebrando por tanto a continuidade desse ciclo do código, continuando somente no próximo valor, que seria a impressão do valor 4 e assim por diante.

9.6 For...of

O loop for...of, introduzido no ES6, oferece uma maneira moderna e versátil de iterar sobre objetos iteráveis.

const numbers = [1, 2, 3, 4, 5];

for (const number of numbers) {
  if (number > 3) { // Verifica se o número é menor que 3
    break; 
    // Interrompe o loop com sucesso
  }
  console.log(number);
}
// Saída: 1, 2, 3

Este código itera sobre os números do array e os imprime até que um número atual seja menor que 3, caso seja maior, o loop é quebrado e os valores 4 e 5 não serão apresentados no console do navegador.

9.7 For in

O for in é utilizado para iterar sobre as propriedades enumeráveis de um objeto. Embora seja comumente utilizado para iterar sobre as propriedades de objetos, seu uso em arrays é desencorajado devido à inclusão de propriedades herdadas. Em arrays, ele itera sobre todas as propriedades enumeráveis, o que pode incluir mais do que apenas os elementos do array.

const fruits = ['Apple', 'Banana', 'Cherry'];
for (const index in fruits) {
  console.log(`Fruit ${index}: ${fruits[index]}`);
}
// Saída: Fruit 0: Apple, Fruit 1: Banana, Fruit 2: Cherry

Com esse loop, podemos trabalhar com os valores do index, da mesma forma que temos no for tradicional.

Embora funcione corretamente para iterar sobre arrays, é importante ter em mente que pode incluir propriedades não relacionadas aos elementos do array, como métodos ou propriedades herdadas, o que pode não ser desejado em todas as situações.

Entender os diferentes métodos de iteração e as instruções de controle em JavaScript é fundamental para escrever código eficiente e legível. Os loops tradicionais for e while oferecem controle preciso sobre o fluxo de execução, enquanto métodos modernos como forEach e for...of simplificam a iteração sobre arrays e outros iteráveis. É importante lembrar as limitações de cada método e escolher o mais adequado para cada situação. Combinando esses conceitos e técnicas, você poderá escrever código JavaScript mais robusto e elegante para uma variedade de aplicativos e projetos.

No próximo capítulo, vamos abordar um conceito importante em JavaScript: a diferença entre função e método. Entender essa distinção é fundamental para escrever código claro, modular e reutilizável.