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