For

Método tradicional de loop, que te dá acesso a cada elemento, ao contador do loop e controle de cada operação.

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

While

O loop while é excelente quando a duração do loop depende de uma condição diferente do comprimento do array. Ele continua funcionando enquanto a condição for verdadeira. É útil quando a condição de encerramento é dinâmica e pode mudar durante a execução do loop.

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

É preciso cuidar com o loop infinido, que faz o while nunca ser quebrado e rodar infinitamente.

const i = 3;
while (i < 4) {
  console.log("Loop infinido rodando...");
}
// Loop infinido rodando..

ForEach

O método forEach do JavaScript é uma ferramenta popular para iterar listas por deixar o código menor e legível. Ele executa uma função fornecida uma vez para cada elemento da lista. No entanto, diferentemente dos loops for ou while, o forEach foi projetado para executar a função para cada elemento, sem um mecanismo integrado para interromper ou parar o loop prematuramente.

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

fruits.forEach(function(fruit) {
  console.log(fruit);
});

// apple banana cherry

Break

Uma limitação importante do forEach é a incapacidade de parar ou interromper o loop usando instruções de controle tradicionais como break ou return. Se você tentar usar break dentro de forEach, encontrará um erro de sintaxe porque break não é aplicável em uma função de retorno de chamada.

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

numbers.forEach(number => {
  if (number > 3) {
    break; // Syntax Error: Illegal break statement
  }
  console.log(number);
});

Quando você tenta usar break em um loop forEach, o JavaScript gera um erro de sintaxe. Isso ocorre porque break foi projetado para ser usado em loops tradicionais (como for, while, do...while) e não é reconhecido na função de retorno de chamada de forEach.

for(let i = 10; i > 0; i--) {

if(i == 4) {
continue;

// Vai pular o 4, indo para o 3
}

if(i === 2) {
break;

// Vai parar o look aqui, sendo último valor impresso o 3
}

console.log(i);
}

Continue

É utilizado para pular uma instrução.

Return

Em outros loops ou funções, o return sai do loop ou função, retornando um valor, se especificado.

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

numbers.forEach(number => {
  if (number === 3) {
    return; // Exits only the current iteration
  }
  console.log(number);
});

// 1 2 4 5

No contexto de forEach, return não sai do loop. Em vez disso, ele simplesmente sai da iteração atual da função de retorno de chamada e passa para o próximo elemento da matriz.

for...of

O loop for...of, introduzido no ES6 (ECMAScript 2015), oferece uma maneira moderna, limpa e legível de iterar sobre objetos iteráveis como listas, strings, maps, conjuntos e muito mais. Sua principal vantagem em comparação com forEach reside na compatibilidade com instruções de controle como break e continue, proporcionando maior flexibilidade no controle de loop. Ideal para situações que não se necessita trabalhar com o index.

Vantagens:

Flexibilidade: permite o uso de instruções break, continue e return. Legibilidade: Oferece sintaxe clara e concisa, tornando o código mais fácil de ler e entender. Versatilidade: Capaz de iterar em uma ampla variedade de objetos iteráveis, não apenas em listas.

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

for (const number of numbers) {
  if (number > 3) {
    break; // Successfully breaks the loop
  }
  console.log(number);
}

// 1 2 3

Complemento

JavaScript Interview: Can You Stop or Break a forEach Loop? 🛑 9 Ways to Loop Arrays in JavaScript