6. 객체를 좀 더 쉽게 병합하는, Object.assign 메서드

안녕하세요, 프로독학러 입니다.

이번 포스팅에서는 객체를 병합하는 메서드인 object.assign 메서드에 대해서 알아보도록 하겠습니다.

먼저 표현식 부터 보시겠습니다.

Object.assign(target, ...sources)

object.assign 메서드의 첫 번째 인자는 타겟입니다.

두 번째 인자부터 마지막 인자까지는 소스 오브젝트입니다.

소스 오브젝트는 타겟 오브젝트에 병합됩니다.

그리고 리턴값으로 타겟오브젝트를 반환합니다.

이해를 돕기 위해 예제를 보겠습니다.

var obj = {a:1};
var copy = Object.assign({}, obj);
console.log(copy); // {a: 1}

위의 예제에서 obj는 a라는 프로퍼티 하나를 가진 객체입니다.

그리고 copy라는 변수에 Object.assign 메소드를 이용해 obj객체를 복사했습니다.

메서드의 첫 번째 인자로 객체 리터럴({ })이 들어왔습니다. 이는 새로운 객체를 타깃으로 (리턴할) 한다는 의미입니다.

그리고 두 번째 인자로 obj 가 들어와 첫 번째 인자인 빈 객체 안에 병합 되었습니다.

그리고 빈객체에 obj가 병합된 객체라 리턴되어 copy라는 변수에 할당되었습니다.

따라서 copy를 콘솔로 찍어보면 obj객체와 같은 {a:1}이 찍히게 됩니다.

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

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

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 메서드의 첫 번째 인자(타겟)로 빈 객체를 주었습니다.

그러나 전의 예제와는 달리 소스인자를 1개 이상 주었습니다.

위에서 정의한 obj1, obj2, obj3를 각각 {}안에 병합합니다.

따라서 newObj 를 콘솔로 찍어보면 세 오브젝트를 병합한 {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}

위의 예제는 newObj를 위해서 Object.assign 메서드를 실행 할 때, 타겟을(첫 번째 인자)를 기존에 존재하는 obj1로 주었습니다.

그 결과, newObj는 obj1, 2, 3을 모두 병합한 결과가 나왔습니다. // {a: 1, b: 2, c: 3}

그러나 타깃인 obj1도 {a: 1, b: 2, c: 3} 로 변한 것을 알 수 있습니다. 

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

위의 예제와 같이 obj1이 변질되는 것을 원치 않으시다면 말입니다.

여기까지 객체를 병합하는 ES6 의 새로운 메서드인 Object.assign에 대해서 알아봤습니다.

다음 포스팅에서는 문자열안에서 변수를 사용할 때 좀 더 직관적이고 편리하게 사용할 수 있는 template literals에 대해서 알아보도록 하겠습니다.

감사합니다.

**참고 자료 (항상 감사드립니다)

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

*다녀가셨다는 표시는 공감으로 부탁드릴게요! (로그인 하지 않으셔도 공감은 가능합니다 ㅎㅎ)