Object.assign()

Object.assign()

---

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

MDN문서에 따르면 Object.assign() 메서드의 정의는 다음과 같다. 한마디로 '객체들을 병합하는 메서드' 이며, 아래와 같은 구조로 사용한다.

Object.assign(target, ...sources)

 

✔️ 첫 번째 parameter : target

✔️ 두 번째~ parameter : source 객체들

 

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

 

그림으로 표현하면 아래처럼 되는데, 여기서 obj1, obj2, obj3이 소스가 되는 객체들이고, 이 소스 객체들이 합쳐지는 곳인 target이 타겟 객체이다. 최종적으로는 이 타겟 객체가 반환된다.

 

예시

타겟 객체를 빈 객체({})로 하고, 소스로 각 객체들을 넘겨주면 빈 객체에 모두 더해진 후 반환된다. 아래 예시에서는 빈 객체에 obj1, obj2, obj3의 요소들이 더해지고 그렇게 모두 더해진 객체인 {a:1, b:2, c:3}가 최종적으로 반환되었다.

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}

 

타겟 객체로 이미 존재하는 객체를 지정하면, 그 객체 자체가 변질된다. 아래 예시를 보면 obj1를 타겟 객체로 하고, obj2, obj3를 소스 객체로 삼았기 때문에 obj1에 obj2, obj3의 요소들이 더해져 반환된다. 주의할 점은 여기서 obj1의 값이 기존의 {a:1}에서 {a:1, b:2, c:3}로 변해버린다는 것이다. 새로운 객체를 반환하고 싶다면, 위의 예제처럼 빈 객체를 타겟 객체로 넣어줘야 한다!

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}