Error al recorrer un array con el bucle for-in en JavaScript

Para recorrer un array se debe usar el bucle for-of. A veces, sin embargo, los principiantes erroneamente intentan aplicar el bucle for-in. Veamos los signos característicos de este error.

Supongamos que tenemos un array:

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

Recorramos los elementos de este array y escribámoslos en una sola cadena.

Un programador ya resolvió esta tarea, pero erroneousamente usó el bucle for-in. Veamos qué obtuvo:

let res = '';

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

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

Entonces, el resultado es la cadena '012', y no 'abc'. Averigüemos por qué sucedió esto.

¿Por qué el array se recorrió con el bucle for-in? El hecho es que un array en JavaScript es un caso especial de objeto. Por lo tanto, en realidad en este sentido es un código correcto. Pero no se debe hacer así.

El problema es que for-in bajo ciertas condiciones puede captar elementos adicionales, y además de los elementos del array obtendrás algo más parasitario durante el recorrido. Recorre los arrays sólo con for-of.

Ahora averigüemos por qué vemos un resultado tan extraño. El hecho es que al recorrer con for-in en la variable elem en realidad caerán las claves, a pesar del nombre confuso de esta variable.

Corrijamos el error cometido y escribamos el código correcto:

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

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

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