(JS) Object.assign()

호두파파·2021년 2월 26일

호두파파 JS 스터디

목록 보기
18/27

Object.assign() 메소드는 열거할 수 있는 하나 이상의 출처 객체로부터 대상 객체로 속성을 복사할 때 사용한다. 대상 객체를 반환한다.

Object.assign(target, ...sources)

매개변수

target : 대상 객체
sources : 하나 이상의 출처 객체

동일한 키가 존재할 경우 대상 객체의 속성은 출처 객체의 속성으로 덮어쓰여진다. 후에 출처의 속성은 이전의출처의 속성과 유사하게 덮어쓴다.

Object.assign()메소드는 열거할 수 있는 출처 객체의 속성만 대상 객체로 복사한다. 이 메소드는 출처 객체의 [[Get]], 대상 객체의 [[Set]]을 사용해 getter와 setter를 호출한다. 따라서 속성을 단순히 복사하거나 새롭게 정의하는 것이 아니라 할당하는 것이다.

프로토 타입으로 속성의 열거성을 포함한 속성의 정의를 복사하려면 대신 Object.getOwnPropertyDescriptor()와 Object.defineProperty()를 사용해야 한다.

객체 클로닝

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

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

객체 병합

const o1 = { a: 1 };
const o2 = { b: 2 };
const o3 = { c: 3 };

const obj = Object.assign(o1, o2, o3);
console.log(obj); // { a: 1, b: 2, c: 3 }
console.log(o1);  // { a: 1, b: 2, c: 3 }, 대상 객체 자체가 변경됨.

같은 속성을 가진 객체 병합

const o1 = { a: 1, b: 1, c: 1 };
const o2 = { b: 2, c: 2 };
const o3 = { c: 3 };

const obj = Object.assign({}, o1, o2, o3);
console.log(obj); // { a: 1, b: 2, c: 3 }

속성은 파라미터 순서에서 더 위에 위치한 동일한 속성을 가진 다른 객체에 의해 덮어쓰인다.


참고문서

MDN 문서보기

profile
기술적 혁신과 측정 가능한 성과를 추구하는 프론트엔드 개발자 양윤성입니다.

0개의 댓글