Usos do for...in e for...of.

Os laços for...in e for...of são estruturas de iteração em JavaScript, mas possuem usos distintos.

O for...in é usado para iterar sobre as chaves (propriedades enumeráveis) de um objeto ou índice de um array. É ideal para percorrer objetos, mas deve ser usado com cautela em arrays, pois pode incluir propriedades herdadas do protótipo.

Podemos ter como exemplo o código abaixo.

const obj = { a: 1, b: 2 };
for (const key in obj) {
console.log(key); // "a", "b"
}

Já o for...of é usado para iterar sobre valores de elementos iteráveis, como arrays, strings, mapas, sets e outros objetos que implementam o protocolo de iteração. Ele é preferível para percorrer coleções de dados.

Veja o exemplo abaixo:

const arr = [10, 20, 30];
for (const value of arr) {
console.log(value); // 10, 20, 30
}

Assim, podemos notar que as principais diferenças entre ele são que o for...in Trabalha com índices ou chaves (propriedades enumeráveis) e o for...of Trabalha diretamente com valores dos elementos iteráveis.

Espero ter contribuído e espero ter gostado do artigo. Se preferir pode me seguir no Linkendin ou no GitHub. O link está abaixo!

https://github.com/SergioDevSousa

https://www.linkedin.com/in/sergiosousa-tec/