JSON 데이터를 다루다 보면 객체 안에 배열이, 그 배열 안에 또 다른 객체가 중첩된 복잡한 구조를 자주 만나게 됩니다. 이런 중첩 데이터를 효율적으로 처리하려면 JavaScript의 map()과 forEach() 같은 배열 메서드를 활용하는 것이 가장 효과적입니다. 아래 예제에서는 객체 내부의 객체 배열을 순회하면서 각 항목의 값을 추출해 화면에 출력하는 과정을 살펴보겠습니다.
예제 코드
다음은 map과 forEach를 사용해 객체 내부의 객체 배열을 파싱하는 전체 코드입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.result {
font-size: 18px;
font-weight: 500;
color: rebeccapurple;
}
</style>
</head>
<body>
<h1>Parse array of objects inside object</h1>
<div class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>Click on the above button to parse the json object</h3>
<script>
let json = {
storeData: [
{
items: [
{
itemID: 12,
cost: {
costNum: 100,
},
},
{
itemID: 22,
cost: {
costNum: 250,
},
},
{
itemID: 19,
cost: {
costNum: 350,
},
},
],
},
],
};
let resEle = document.querySelector(".result");
document.querySelector(".Btn").addEventListener("click", () => {
let sum = 0;
json.storeData.map((ele) => ({
itemPrice: ele.items.forEach((item) => {
resEle.innerHTML +=
"itemID : " +
item.itemID +
" : costNum : " +
item.cost.costNum +
"<br>";
}),
}));
});
</script>
</body>
</html>
출력 결과
위 코드를 실행하면 다음과 같은 초기 화면이 표시됩니다.
CLICK HERE 버튼을 클릭하면 클릭 이벤트 핸들러가 실행되어 JSON 객체 내부의 데이터를 순회하고, 다음과 같이 각 상품의 itemID와 costNum 값이 화면에 차례대로 출력됩니다.
코드 동작 원리
- 버튼을 클릭하면
addEventListener로 등록된 콜백 함수가 실행됩니다. json.storeData.map(...)을 통해 storeData 배열의 각 요소에 접근합니다.- 각 요소 안의 items 배열에 대해
forEach()를 호출해 itemID와cost.costNum값을 읽어옵니다. - 읽어온 값은 문자열로 연결되어
innerHTML에 누적되고, .result 영역에 한 줄씩 표시됩니다.
map()과 forEach(), 어떤 것을 써야 할까?
두 메서드는 모두 배열을 순회한다는 점에서 비슷하지만 용도가 조금 다릅니다. forEach()는 단순히 각 요소에 대해 콜백을 실행할 뿐 새로운 배열을 반환하지 않습니다. 반면 map()은 콜백의 반환값을 모아 새로운 배열을 생성합니다. 따라서 위 예제처럼 화면에 값을 출력하는 등의 부수 효과(side effect)만 필요하다면 forEach()만으로 충분하고, 변환된 데이터를 새 배열로 받아 재사용해야 한다면 map()을 사용하는 것이 바람직합니다.