[Js] Object.assign()와 spread (...) - 객체 복사하기

Object.assign()

 

Object.assign(목표객체, ...출처객체);

 

Object.assign() 메소드는 출처 객체의 속성들을 목표 객체로 복사합니다. 수정된 목표 객체를 반환합니다.

• 기존 목표객체 변경

const target = { a: 'Apple', b: {name: 'Banana', color: 'yellow'}};
const source = { b: {name: 'Grape', color: 'purple'} };

const copied = Object.assign({}, target);         
// { a: 'Apple', b: {name: 'Banana', color: 'yellow'} }

const assigned = Object.assign(target, source);   
// { a: 'Apple', b: {name: 'Grape', color: 'purple'} }

const assigned2 = Object.assign(copied, source);  
// { a: 'Apple', b: {name: 'Grape', color: 'purple'} }

console.log(Object.is(copied, target));      // false
console.log(Object.is(copied.b, target.b));  // true
console.log(Object.is(assigned, assigned2));   // false

 

Object.assign() 자세히 보기

 

 

 

전개구문 spread ( ...)

 

myFunction(...iterableObj);

 

전개 구문을 사용하면 배열이나 문자열과 같이 반복 가능한 문자를 0개 이상의 인수 (함수로 호출할 경우) 또는 요소 (배열 리터럴의 경우)로 확장하여, 0개 이상의 키-값의 쌍으로 객체로 확장시킬 수 있습니다.

spread 는 객체 또는 배열인 iterableObj 펼칠 수 있습니다.

• 기존 객체 또는 배열을 변경하지 않음

const A = { a: 'Apple', b: {name: 'Banana', color: 'yellow'}};
const B = { b: {name: 'Grape', color: 'purple'} };

const copied = {...A};          
// { a: 'Apple', b: {name: 'Banana', color: 'yellow'} }
const spreaded = {...A, ...B};  
// { a: 'Apple', b: {name: 'Grape', color: 'purple'} }

console.log(Object.is(copied, A));      // false
console.log(Object.is(copied.b, A.b));  // true

spread 자세히 보기

 

 

▶ 배열을 복사할 때에는 concat() 함수를 사용하는 것이 더 좋습니다.