자바스크립트 배열 순회에 for...in을 사용하면 안 되는 이유

자바스크립트에서 for...in 루프를 사용해 배열을 반복하는 것은 여러 가지 이유로 좋지 않은 습관입니다. 일반적인 반복문과 비교하면서 그 원인을 자세히 살펴보겠습니다.

일반적인 반복문 사용 예시

let arr = []
arr[4] = 5
for (let i = 0; i < arr.length; i++) {
    console.log(arr[i])
}

출력 결과

undefined
undefined
undefined
undefined
5

배열의 길이가 5이므로 인덱스 0부터 4까지 모든 요소를 순회하며, 값이 할당되지 않은 요소는 undefined로 출력됩니다. 즉, 배열의 구조를 있는 그대로 반영하여 동작합니다.

for...in을 사용한 경우

같은 배열을 for...in으로 순회하면 결과가 달라집니다.

let arr = []
arr[4] = 5
for (let i in arr) {
    console.log(arr[i])
}

출력 결과

배열의 길이는 분명히 5인데도 실제로 출력되는 값은 하나뿐입니다. 빈 인덱스(0~3)는 아예 건너뛰어 버리는 것입니다.

for...in이 배열 순회에 부적합한 이유

1. 객체 속성 열거를 위한 문법입니다.

for...in은 본래 객체의 열거 가능한 속성(enumerable properties)을 나열하기 위해 설계된 문법입니다. 배열의 인덱스 역시 내부적으로는 문자열 형태의 속성 키로 취급되기 때문에, 위 예제처럼 중간에 빈 요소가 있는 희소 배열(sparse array)에서는 값이 실제로 할당된 요소만 순회하게 됩니다.

2. 프로토타입 체인까지 탐색합니다.

for...in은 프로토타입 체인을 따라 거슬러 올라가며 상속된 속성까지 함께 열거합니다. 만약 Array.prototype에 커스텀 메서드나 속성이 추가되어 있다면, 그것들까지 의도치 않게 순회 대상에 포함될 수 있습니다. 이러한 동작은 대부분의 경우 개발자가 기대하는 것이 아닙니다.

권장하는 대안

배열을 순회할 때는 다음과 같은 방법을 사용하는 것이 안전하고 명확합니다.

for...of : 배열의 값을 기준으로 순회하며, 프로토타입 체인의 영향을 받지 않습니다.
Array.prototype.forEach() : 콜백 함수로 각 요소와 인덱스를 깔끔하게 처리할 수 있습니다.
전통적인 for 루프 : 인덱스를 직접 제어해야 하거나 성능이 중요한 경우에 유용합니다.

결론적으로, for...in은 객체의 속성을 열거하기 위한 도구일 뿐 배열 순회용이 아니므로, 배열에는 for...of나 forEach() 같은 전용 순회 방법을 사용하는 것이 바람직합니다.