자바스크립트 객체 병합, 합치는 방법, merge

 
자바스크립트에서 여러개의 객체를 하나로 병합하는 방법... 즉, 객체(Object)를 합치는 방법(Merging)에 대하여 알아보겠습니다.

! 객체를 언제 합쳐야 할까요?

여러가지 이유가 있겠지만 가장 많은 이유는 컬렉션 등의 데이터를 가지는 여러개의 객체를 하나로 병합하는 경우가 있습니다. 또 다른 경우는 같은 이름을 가진 객체를 호출하는 경우입니다. 이 경우 덮혀 쓰여질 수 있기 때문에 나중에 호출된 객체만 남을 수도 있겠죠. 이 경우 하나로 병합하면 문제가 해결될 수 있습니다.

# 자바스크립트 객체 병합, 합치기

먼저 여러개의 객체를 하나로 합치는 방법은 두 가지 방법이 있는데 ES 6에서의 방법과 이 전 Object 객체 API의 assign() 함수를 사용하는 방법입니다. 둘 다 각각 알아보겠습니다. 먼저 ES 6에서의 방법을 알아보죠.

! ES 6 객체 병합 방법

ES 6에서는 보다 간단한 방법으로 객체를 병합할 수 있습니다. 이 때 ... 기호를 사용하여 여러개를 하나로 만들 수 있죠. 예를들어 아래의 obj3는 obj1 그리고 obj2를 합치는 결과와 같습니다.

위 코드를 수행하면 다음과 같이 나타납니다.

보시는 것처럼 obj3는 obj1 그리고 obj2를 합친 값을 가지게 되죠. 매우 간단합니다. 다만 ES 6를 지원하는 환경이 필요하겠죠.

! assign()을 사용하여 객체 합치기

객체 병합을 위해서 Object의 assign()을 사용할 수 있습니다. 대부분의 브라우저에서 사용 가능한 방법으로 꼭 알아두면 좋겠습니다. 먼저 문법은 아래와 같습니다.

Object.assign(obj1, obj2, ...);


위 코드를 살펴보면 맨 앞에 인자로 obj1이 사용되었죠. 이 부분이 중요한 데 그 이유는 가장 먼저 선언된 값으로 다른 객체들의 값이 병합되어 합쳐지게 됩니다. 예를들어 아래의 obj1은 obj2가 병합됩니다.

만약 obj3라는 새로운 변수를 만들어 병합하려면 아래와 같이 빈 객체를 맨 앞에 추가하는 방법으로 응용하면 간단합니다.

이처럼 간단하게 병합할 수 있습니다. 여기까지 객체를 병합하는 방법에 대하여 알아보았습니다.