for...in 루프는 원래 객체(object)의 속성(property)을 순회하기 위해 사용되는 반복문입니다. 그런데 이 문법은 배열의 요소를 반복 처리할 때도 활용할 수 있습니다. 이번 글에서는 for...in 문을 사용해 JavaScript 배열을 순회하는 방법을 살펴보겠습니다.
for...in 문의 기본 동작 원리
for...in 문은 객체가 가진 열거 가능한 속성을 하나씩 꺼내며 반복합니다. 배열에 적용하면 각 요소의 인덱스(키)가 반복 변수에 할당됩니다. 따라서 items[i]와 같은 형태로 실제 배열 값에 접근하게 됩니다.
예제 코드
아래 코드를 실행하면 for...in 문으로 배열을 순회하는 과정을 직접 확인할 수 있습니다.
<html>
<body>
<script>
var items = new Array('Hello', 'World');
var i = 0;
for (var i in items) {
document.write(items[i]);
}
</script>
</body>
</html>
실행 결과
HelloWorld
위 예제에서 for...in 루프는 배열 items의 인덱스인 0과 1을 차례대로 변수 i에 할당하며, document.write(items[i])를 통해 각 인덱스에 해당하는 값을 출력합니다.
사용 시 주의 사항
for...in 문은 본래 배열 순회를 위해 설계된 문법이 아니기 때문에 다음과 같은 점에 유의해야 합니다.
- 배열 프로토타입에 추가된 사용자 정의 속성까지 함께 순회할 수 있습니다.
- 인덱스가 문자열(string) 형태로 반환되므로 산술 연산 시 주의가 필요합니다.
- 순회 순서가 환경에 따라 보장되지 않을 수 있습니다.
따라서 단순히 배열의 요소를 순회하는 목적이라면 for...of 문이나 forEach() 메서드를 사용하는 것이 더 안전하고 권장됩니다. for...in은 객체의 키(key)를 순회할 때 활용하는 것이 가장 적합합니다.