Object.assign()

Object.assign() 메서드는 원본 객체(sources)의 모든 열거 가능한 자체 속성을 복사해 대상 객체(target)에 붙여 넣는다.

그 후 대상 객체를 반환한다. 

Object.assign(target, ...sources)

target : source의 속성을 복사해 반영한 후 반환할 객체 

sources : target에 반영하고자 하는 속성들을 가지고 있는 객체 

 

이때, target 의 속성 중 source와 동일한 키를 가지는 속성의 경우 그 속성 값은 source의 값으로 덮어 쓰인다. 

즉, 키가 겹치는 경우 뒤쪽 객체의 속성 값이 앞쪽 객체의 속성값보다 우선시 된다. 

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 }

 

Object.assign은 객체를 복사하는 경우에도 자주 사용된다.

let user = {firstName: 'John', lastName: 'Doe' };
let user_clone = Object.assign({}, user);

 

TypeScript에서 객체에 spread연산자를 사용하는 경우, 아래와 같은 javascript코드가 실행된다. 

이때 출력되는 search의 값은 { "food": "rich", "price": "$$", "ambiance": "noisy" }이다. food의 값이 spicy에서 rich로 바뀌었음을 알 수 있다. 

 

반면 ...defaults와 food의 순서를 바꾼 경우 아래와 같은 코드가 실행된다. 

이경우에도 출력은 되는데 에러가 뜨게된다. 출력되는 search의 값은 { "food": "spicy", "price": "$$", "ambiance": "noisy" }이다. 위의 경우와 다르게 여전히 food가 spicy임을 알 수 있다. 

 

이코드에서 발생되는 에러는 다음과 같다. 

사용자가 의도하지 않은 동작이라고 판단하여 error로 판단하는 것 같다. 

 

--- 참고 사이트

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

https://www.typescriptlang.org/docs/handbook/variable-declarations.html#default-values

https://engineer-mole.tistory.com/151