JavaScript에서 for-in 루프로 배열 순회 시 오류

배열을 순회하려면 for-of 루프를 사용해야 합니다. 그러나 때로는 초보자들이 실수로 for-in 루프를 사용하려고 합니다. 이 오류의 특징적인 증상을 살펴보겠습니다.

다음과 같은 배열이 있다고 가정해 보겠습니다:

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

이 배열의 요소들을 순회하여 하나의 문자열로 합쳐 보겠습니다.

어떤 프로그래머가 이미 이 작업을 했지만, 실수로 for-in 루프를 사용했습니다. 그 결과를 살펴보겠습니다:

let res = '';

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

console.log(res); // '012'를 출력함

결과는 'abc'가 아니라 '012' 문자열입니다. 왜 이런 일이 발생하는지 알아보겠습니다.

왜 배열이 for-in 루프로 순회가 가능한 걸까요? 사실 JavaScript에서 배열은 객체의 특별한 경우입니다. 따라서 기술적으로 이 코드는 올바릅니다. 그러나 이렇게 해서는 안 됩니다.

문제는 for-in가 특정 조건에서 추가적인 속성을 포착할 수 있어, 배열 요소 외에도 원치 않는 것들을 순회 결과에 포함시킬 수 있다는 점입니다. 배열은 for-of로만 순회하세요.

이제 왜 이런 이상한 결과가 나타나는지 알아보겠습니다. 사실 for-in로 순회할 때, 변수명 elem이 혼란을 줄 수 있지만, 실제로 이 변수에 들어가는 것은 키(key)입니다.

이제 발생한 오류를 수정하고 올바른 코드를 작성해 보겠습니다:

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

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

console.log(res); // 'abc'를 출력함