본문 바로가기
Javascript

Object.assign 서로 다른 객체 하나로 병합하기/합치기

by @hohoya33 2021년 03월 11일

ES6 Defaults / Overrides Pattern

Object.assign() 함수는 첫 번째 Object에 그다음 Object(들)을 병합해 주는 것으로서, 아래 코드를 아래와 같은 방법으로 작성할 수 있습니다.

// Object.assign(target, ...sources)

Object.assign([target 객체], [여러개의 객체] )

첫 번째 인자는 target

sources 오브젝트는 target 오브젝트에 병합

리턴값으로 target 오브젝트 반환

var defaults = {
    bar: 'no',
    baz: 'works!'
  };

function foo (options) {
  var settings = Object.assign({}, defaults, options),
    bar = settings.bar,
    baz = settings.baz;

  return (bar + ', ' +baz);
}

console.log(foo({
  bar: 'yay'
})); // logs 'yay, works!'

만약 타겟 오브젝트에 빈 객체 리터럴을 준 것이 아니라 이미 존재하는 객체를 넣으면 어떤 결과가 나올까요?

var obj1 = { a: 1 };
var obj2 = { b: 2 };
var obj3 = { c: 3 };

var newObj = Object.assign(obj1, obj2, obj3);

console.log(newObj); // {a: 1, b: 2, c: 3}
console.log(obj1); // {a: 1, b: 2, c: 3}

그 결과, newObj는 obj1, obj2, obj3을 모두 병합한 결과가 나왔습니다. 
하지만 target인 obj1도 { a: 1, b: 2, c: 3 } 로 변한 것을 알 수 있습니다. 위의 예제와 같이 obj1이 변질되는 것에 주의하세요.

var newObject = Object.assign({}, object1, object2, object3);

Object.assign의 메서드의 결과가 새로운 객체를 반환해야 한다면 target으로 빈 객체를 주는 것을 잊지 말아야 합니다.

개의 댓글