[Javascript] Object.assign

 

 

오늘은 Object.assign에 대해 다뤄보겠습니다. Object.assign는 객체를 병합하는 메서드인데요, 병합 이외에도 다양한 조작이 가능하기 때문에 예제를 통해 Object.assign에 대해 알아보겠습니다.

 

먼저 표현식은 다음과 같습니다.

 

Object.assign(target, ...sources)

 

object.assign 메서드의 첫 번째 인자는 타겟입니다. 두 번째 인자부터 마지막 인자까지는 소스 오브젝트입니다. 소스 오브젝트는 타겟 오브젝트에 병합되며 리턴값으로 타겟오브젝트를 반환합니다.

 

 

 

 

 

예제

---

예제를 통해 알아보겠습니다.

 

const jessica2 = {
    firstName: 'Jessica',
    lastName: 'Williams',
    age: 27,
    family: [ 'Alice', 'Bob'],
};

const jessicaCopy = Object.assign({}, jessica2);
jessicaCopy.lastName = 'Davis'; 
console.log(jessicaCopy);
//{firstName: 'Jessica', lastName: 'Davis', age: 27, family: Array(2)}
//	age: 27
//	family: (2) ['Alice', 'Bob']
//	firstName: "Jessica"
//	lastName: "Davis"
//	[[Prototype]]: Object

 

• 위의 예제에서 jessica2는 객체입니다. 그리고 jessicaCopy라는 변수에 Object.assign 메소드를 이용해 jessica2객체를 복사했습니다.
• 메서드의 첫번째 인자로 객체 리터럴({})이 들어왔는데요, 이는 새로운 객체를 타깃으로(리턴할) 한다는 의미입니다.
• 두번째 인자로는 jessica2가 들어와 첫번째 인자인 빈 객체 안에 병합되었습니다. 그리고 빈객체에 jessica2가 병합된 객체가 리턴되어 jessicaCopy라는 변수에 할당되었습니다.
• 이후 jessicaCopy의 lastName을 'Davis'로 변경하기 위해 jessicaCopy.lastName = 'Davis'; 를 적습니다. 
• jessicaCopy를 콘솔로 찍어보면 jessica2 객체에서 lastName만 Davis로 바뀐것이 찍히게 됩니다.

즉, Object.assign 메서드의 타깃에 빈 객체를 주고 소스를 한 개만 주면 해당 소스를 복제하는 것이 됩니다.

 

 

---

 

 

 

이번에는 Object.assign 메서드에 소스가 여러개 들어온 상황을 보겠습니다.

 

let obj1 = {a:1};
let obj2 = {b:2};
let obj3 = {c:3};
let newObj = Object.assign({}, obj1, obj2, obj3);
console.log(newObj); // {a: 1, b: 2, c: 3}​

 

위의 예제에서는 그 전의 예제와 마찬가지로 Object.assign 메서드의 첫 번째 인자(타겟)로 빈 객체를 주었습니다. 그러나 전의 예제와는 달리 소스인자를 1개 이상 주었습니다. 위에서 정의한 obj1, obj2, obj3를 각각 {}안에 병합합니다.

 

따라서 newObj 를 콘솔로 찍어보면 세 오브젝트를 병합한 {a: 1, b: 2, c: 3} 가 나오게 됩니다.

 

 

 

---

 

 

 

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

 

 

let obj1 = {a:1};
let obj2 = {b:2};
let obj3 = {c:3};
let 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를 위해서 Object.assign 메서드를 실행 할 때, 타겟을(첫 번째 인자)를 기존에 존재하는 obj1로 주었습니다.
• 그 결과, newObj는 obj1, 2, 3을 모두 병합한 결과가 나왔습니다. // {a: 1, b: 2, c: 3}
• 그러나 타깃인 obj1도 {a: 1, b: 2, c: 3} 로 변한 것을 알 수 있습니다. 
• 따라서 Object.assign의 메서드의 결과가 새로운 객체를 반환해야한다면, 타깃으로는 빈 객체를 주는 것을 잊지 말아야 합니다.

 

 

 

 

 

 

 

참고:

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/assign

https://pro-self-studier.tistory.com/21