ES6 Defaults / Overrides Pattern
Object.assign() 함수는 첫 번째 Object에 그다음 Object(들)을 병합해 주는 것으로서, 아래 코드를 아래와 같은 방법으로 작성할 수 있습니다.
// Object.assign(target, ...sources)
Object.assign([target 객체], [여러개의 객체] )
첫 번째 인자는 target
sources 오브젝트는 target 오브젝트에 병합
리턴값으로 target 오브젝트 반환
var defaults = {
bar: 'no',
baz: 'works!'
};
function foo (options) {
var settings = Object.assign({}, defaults, options),
bar = settings.bar,
baz = settings.baz;
return (bar + ', ' +baz);
}
console.log(foo({
bar: 'yay'
})); // logs 'yay, works!'
만약 타겟 오브젝트에 빈 객체 리터럴을 준 것이 아니라 이미 존재하는 객체를 넣으면 어떤 결과가 나올까요?
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는 obj1, obj2, obj3을 모두 병합한 결과가 나왔습니다.
하지만 target인 obj1도 { a: 1, b: 2, c: 3 } 로 변한 것을 알 수 있습니다. 위의 예제와 같이 obj1이 변질되는 것에 주의하세요.
var newObject = Object.assign({}, object1, object2, object3);
Object.assign의 메서드의 결과가 새로운 객체를 반환해야 한다면 target으로 빈 객체를 주는 것을 잊지 말아야 합니다.
'Javascript' 카테고리의 다른 글
javascript 비디오 재생 여부 확인 방법 (0) | 2021.03.12 |
---|---|
jQuery 리스트 3개씩 묶기 (0) | 2021.03.12 |
유용한 자바스크립트 팁 (0) | 2020.01.03 |
javascript array 반복문 (for loop) (0) | 2019.12.26 |
html5-lint를 이용해 console에서 html 문서 validate 하기 (0) | 2016.11.18 |
개의 댓글