Erro ao iterar array com loop for-in em JavaScript

Para iterar sobre um array, você deve usar o loop for-of. Às vezes, no entanto, iniciantes erroneamente tentam usar o loop for-in. Vamos ver os sinais característicos deste erro.

Suponha que temos um array:

let arr = ['a', 'b', 'c'];

Vamos iterar pelos elementos deste array e gravá-los em uma única string.

Um determinado programador já resolveu esta tarefa, mas erroneamente usou o loop for-in. Vamos ver o que ele conseguiu:

let res = '';

for (let elem in arr) {
	res += elem;
}

console.log(res); // exibirá '012'

Então, o resultado é a string '012', e não 'abc'. Vamos entender por que isso aconteceu.

Por que o array foi iterado com o loop for-in? O fato é que um array em JavaScript é um caso especial de um objeto. Portanto, na verdade, neste aspecto, este é um código correto. Mas não se deve fazer isso.

O problema é que o for-in sob certas condições pode pegar coisas extras, e além dos elementos do array, você pode obter algo parasitário durante a iteração. Sempre itere sobre arrays apenas com for-of.

Agora vamos entender por que vemos um resultado tão estranho. O fato é que, ao iterar com for-in, a variável elem na verdade receberá as chaves, apesar do nome enganoso desta variável.

Vamos corrigir o erro cometido e escrever o código correto:

let arr = ['a', 'b', 'c'];
let res = '';

for (let elem of arr) {
	res += elem;
}

console.log(res); // exibirá 'abc'