Nesse artigo vou te mostrar qual a diferença e como usar os loops do javascript (for ... in, for ... of e forEach).

For ... In

For...in é usado para iterar todas as propriedades enumeráveis de um objeto, incluindo propriedades enumeráveis herdadas. Essa instrução de iteração pode ser usada com strings de arrays ou objetos simples, mas não com objetos Map ou Set.

Exemplo

for (let item in ["a", "b", "c"]) {
  console.log(item);
  // 0, 1, 2 (indices do array )
}
 
for (let string in "string") {
  console.log(string);
  // 0, 1, 2, 3, 4, 5 (indices da palavra "string")
}
 
for (let obj in { a: 1, b: 2, c: 3 }) {
  console.log(obj);
  // a, b, c (nome dos objetos de cada propriedade)
}
 
for (let array in new Set(["a", "b", "a", "d"])) {
  console.log(array);
  // undefined (sem propriedades enumeraveis)
}

For ... of

for...of é usado para iterar sobre arrays, iterando sobre seus valores em vez de suas propriedades. Essa instrução de iteração pode ser usada com matrizes, strings Map ou Set, mas não com objetos simples.

Exemplo

for (let value of ["a", "b", "c", "d"]) {
  console.log(value);
  // a, b, c, d (valores do array)
}
 
for (let value of "string") {
  console.log(value);
  // s, t, r, i, n, g (Caracteres da palavra "string")
}
 
for (let value of { a: 1, b: 2, c: 3 }) {
  console.log(value);
  // TypeError (Não é iteravel)
}
 
for (let value of new Set(["a", "b", "a", "d"])) {
  console.log(value);
  // a, b, d (Valores definidos, não retornando valores repetidos)
}

ForEach

forEach() é um método do Array protótipo, que permite iterar sobre os elementos de um array. EmboraforEach() apenas itere em arrays, ele pode acessar o valor e o índice de cada elemento durante a iteração.

Exemplo

const array = ["a", "b", "c"];
 
array.forEach(
  (value, index) => console.log(value)
  // a, b, c (Valores do array)
);
 
array.forEach(
  (value, index) => console.log(index)
  // 0, 1, 2 (Indices do array)
);

Referências

for...in - Javascript | MDN

for...of - Javascript | MDN

forEach - Javascript | MDN