Object.assign()

Object.assign() 메소드는 열거할 수 있는 하나 이상의 출처 객체로부터 대상 객체로 속성을 복사할 때 사용합니다. 대상 객체를 반환합니다.

 

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

target = 대상 객체

sources = 하나 이상의 출처 객체.

const target = { a: 1, b: 2 };
const source = { b: 4, c: 5 };

const returnedTarget = Object.assign(target, source);

console.log(target);
// expected output: Object { a: 1, b: 4, c: 5 }

console.log(returnedTarget);
// expected output: Object { a: 1, b: 4, c: 5 }

 

여기서 소스(source)가 되는 객체들은 타켓으로 합쳐지고, 최종적으로는 return 된다.

결국 '객체들을 병합하는 메서드' 라는 개념이라고 보면 될 것 같다.

 

예시를 보면서 이해를 해보자!

 

타겟 객체를 빈 객체로({}) 지정하고, 소스로 각 객체들을 넘겨주면 빈 객체에 모두 더해진 후 반환(return)된다.

obj1, obj2, obj3의 요소들이 더해지고 그렇게 모두 더해진 객체인 newObj를 반환하게 된다.

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}

두번째 예시

 

위와 다른 것은 없다. 하지만 Object.assign()안에 빈 객체({})가 없다는 것이다.

그러면 o1은 타겟이 되는 것이고, 나머지 값은 소스가 되는 것이다. 그렇게 모두 더해지고 obj로 최종적으로 반환된다.

여기서 주의할 점은 o1{a: 1} 값이 { a: 1, b: 2, c: 3 } 로 변해버린다는 것이다.

새로운 객체를 반환하고 싶다면 위에 예시처럼 사용해야한다.  

const o1 = { a: 1 };
const o2 = { b: 2 };
const o3 = { c: 3 };

const obj = Object.assign(o1, o2, o3);
console.log(obj); // { a: 1, b: 2, c: 3 }
console.log(o1);  // { a: 1, b: 2, c: 3 }, 대상 객체 자체가 변경됨.