JavaScript에서 여러 개의 객체를 담고 있는 배열을 하나의 단일 객체로 병합하려면 Object.assign() 메서드와 스프레드 연산자(...)를 함께 사용하면 됩니다. 이 조합은 배열 내 모든 객체의 키-값 쌍을 하나의 객체로 합쳐주는 가장 간단하고 널리 사용되는 방식입니다.
Object.assign()은 하나 이상의 소스 객체를 대상 객체에 복사하는 내장 메서드입니다. 여기에 스프레드 연산자를 적용하면 배열의 각 요소(객체)가 개별 인수로 전달되어 하나의 객체로 병합됩니다.
예제 코드
<!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,.sample {
font-size: 18px;
font-weight: 500;
color: rebeccapurple;
}
.sample {
color: red;
}
</style>
</head>
<body>
<h1>Merge objects into a single object array</h1>
<div class="sample">
[{id:22, class:7},{name:'Rohan', age:12},{state:'Delhi',country:'India'}]
</div>
<div class="result"><br /></div>
<button class="Btn">CLICK HERE</button>
<h3>Click on the above button to merge the above objects inside array into a single object</h3>
<script>
let resEle = document.querySelector(".result");
let BtnEle = document.querySelector(".Btn");
let personObj = [
{ id: 22, class: 7 },
{ name: "Rohan", age: 12 },
{ state: "Delhi", country: "India" },
];
BtnEle.addEventListener("click", () => {
personObj = Object.assign(...personObj);
for (let i in personObj) {
resEle.innerHTML += "key = " + i + " : Value = " + personObj[i] + "<br>";
}
});
</script>
</body>
</html>동작 원리
위 예제에서는 세 개의 서로 다른 객체(id/class, name/age, state/country 속성 포함)가 하나의 배열에 담겨 있습니다. 버튼을 클릭하면 Object.assign(...personObj)가 실행되어 배열의 모든 객체가 하나의 객체로 병합되며, 이후 for...in 반복문을 통해 병합된 객체의 모든 키와 값을 화면에 출력합니다.
실행 결과
위 코드를 실행하면 다음과 같은 초기 화면이 나타납니다.
'CLICK HERE' 버튼을 클릭하면 병합된 객체의 키와 값이 아래와 같이 표시됩니다.
참고 사항
병합 과정에서 동일한 키가 여러 객체에 존재하면, 뒤에 오는 객체의 값이 앞선 값을 덮어씁니다. 또한 최신 JavaScript 환경에서는 { ...arr[0], ...arr[1], ...arr[2] } 형태나 Object.fromEntries(arr.flatMap(o => Object.entries(o))) 같은 방법으로도 동일한 결과를 얻을 수 있습니다.