JavaScript에서 두 개의 객체(Object)를 병합하는 방법

JavaScript에서 두 개의 객체를 하나로 합쳐야 하는 경우는 매우 흔합니다. 가장 간단하고 현대적인 방법은 전개 연산자(Spread Operator, ...)를 활용하는 것입니다. 전개 연산자를 사용하면 여러 객체의 속성을 새로운 객체에 손쉽게 복사하여 병합할 수 있습니다.

예제 코드

다음은 person 객체와 address 객체를 병합하는 전체 예제 코드입니다.

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>객체 병합 예제</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>두 개의 JavaScript 객체 병합하기</h1>
<div class="result"></div>
<button class="Btn">여기를 클릭하세요</button>
<h3>
위 버튼을 클릭하면 person 객체와 address 객체가 병합됩니다.
</h3>
<script>
    let BtnEle = document.querySelector(".Btn");
    let resEle = document.querySelector(".result");
    let person = {
        name: "Rohan",
        age: 22,
    };
    let address = {
        state: "Delhi",
        country: "India",
    };
    let mergedObj = { ...person, ...address };
    BtnEle.addEventListener("click", () => {
        for (let i in mergedObj) {
            resEle.innerHTML += "키(Key) = " + i + " : 값(Value) = " + mergedObj[i] + "<br>";
        }
    });
</script>
</body>
</html>

실행 결과

위 코드를 실행하면 다음과 같은 화면이 출력됩니다.

JavaScript에서 두 개의 객체(Object)를 병합하는 방법

'여기를 클릭하세요' 버튼을 누르면 병합된 객체의 모든 키와 값이 아래와 같이 표시됩니다.

JavaScript에서 두 개의 객체(Object)를 병합하는 방법

코드 설명

핵심은 바로 이 한 줄입니다.

let mergedObj = { ...person, ...address };

전개 연산자(...)는 person 객체와 address 객체의 모든 속성을 새로운 객체 literal 안에 펼쳐 넣습니다. 그 결과 mergedObj에는 name, age, state, country 네 개의 속성이 모두 포함되게 됩니다.

버튼 클릭 시 for...in 반복문으로 병합된 객체를 순회하며 각 키와 값을 화면에 출력합니다.

참고: 같은 키가 존재할 경우

두 객체에 동일한 키가 있으면 뒤에 오는 객체의 값이 우선 적용됩니다. 즉, { ...person, ...address }에서 address 객체의 값이 person 객체보다 나중에 적용되어 덮어씌워집니다.

대체 방법: Object.assign()

전개 연산자 외에도 Object.assign() 메서드를 사용할 수 있습니다.

let mergedObj = Object.assign({}, person, address);

두 방식 모두 결과는 동일하지만, 전개 연산자가 문법이 더 간결하고 가독성이 좋아 최근에는 더 널리 사용됩니다. 단, 두 방법 모두 얕은 복사(shallow copy)라는 점은 유의해야 합니다. 중첩된 객체까지 깊게 복사하려면 깊은 복사(deep merge) 로직이나 라이브러리를 사용해야 합니다.