자바스크립트에서 객체 내부에 포함된 배열을 반복 처리하는 방법은 일반 객체를 순회할 때와 동일한 원리를 사용합니다. 이때 활용되는 것이 바로 'for...in' 반복문입니다.
for...in 반복문이란?
for...in 반복문은 객체의 열거 가능한 속성(키)을 하나씩 순서대로 가져오는 구문입니다. 배열 역시 자바스크립트에서 일종의 객체이기 때문에, 객체 안에 중첩된 배열도 같은 방식으로 접근하고 순회할 수 있습니다.
예제 코드
다음 예제에서는 obj라는 객체가 정의되어 있으며, 이 객체 내부에는 companies라는 배열이 존재합니다. 'for...in' 반복문을 사용하면 해당 배열의 요소들이 아래 출력 결과와 같이 화면에 표시됩니다.
<html>
<body>
<script>
var res = ""
var obj = {
"name":"Elon musk",
"age":48,
"companies": [
{"location":"Newyork", "name":["Tesla", "Spacex", "Neuralink"]},
{"location":"Florida", "name":["paypal", "solarcity"]},
]
}
for (var i in obj.companies) {
res += "The companies in " + " "+ obj.companies[i].location + "</br>";
for (var j in obj.companies[i].name) {
res += obj.companies[i].name[j] + "</br>";
}
}
document.write(res);
</script>
</body>
</html>실행 결과
The companies in Newyork Tesla Spacex Neuralink The companies in Florida paypal solarcity
코드 작동 원리 살펴보기
위 코드는 두 단계의 중첩 반복문으로 구성되어 있습니다.
1단계: 첫 번째 for (var i in obj.companies) 반복문은 companies 배열의 각 항목(객체)을 순회하며 해당 지역(location) 정보를 출력합니다.
2단계: 내부의 for (var j in obj.companies[i].name) 반복문은 각 지역 객체 안에 있는 name 배열의 요소(회사 이름)를 하나씩 꺼내어 출력합니다.
참고: 더 나은 대안들
for...in은 배열 순회 시 프로토타입 속성까지 함께 조회될 수 있어 주의가 필요합니다. 실무에서는 다음과 같은 방법을 권장합니다.
- forEach(): 배열 전용 메서드로, 각 요소를 간결하게 순회할 수 있습니다.
- for...of: ES6부터 도입된 문법으로, 배열의 값 자체를 직접 순회합니다.
- Object.keys() / Object.values(): 객체의 키 또는 값을 배열로 반환하여 다양하게 활용할 수 있습니다.
다만 기존 코드 호환성이나 객체와 배열을 동일한 방식으로 다뤄야 하는 경우라면, 위 예제처럼 for...in 반복문이 여전히 유용하게 사용될 수 있습니다.