(JS) Object.assign()

호두파파·2021년 2월 26일
0

호두파파 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개의 댓글