[JavaScript] Object.assign()

Object.assign()

Object.assign() 메서드는 출처 객체들의 속성을 복사해 대상 객체에 붙여넣어 반환한다.

const target = { a: 1, b: 2 };
const source = { b: 4, c: 5 };
const returnedTarget = Object.assign(target, source);
console.log(returnedTarget);	// Object { a: 1, b: 4, c: 5 }

returnedTarget 변수에 할당된 객체는 source 객체의 속성이 target 객체에 복사된 객체이다.

console.log(target);	// Object { a: 1, b: 4, c: 5 }

이때 Object.assign()의 첫번째 인자로 전달된 target 객체 또한 속성이 변경된다.

Object.assign(target, ...sources) - 매개변수

target
목표 객체. 출처 객체의 속성을 복사해 반영한 후 반환할 객체

sources
출처 객체. 목표 객체에 반영하고자 하는 속성들을 갖고 있는 객체들

객체 복제

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

copy.a = 2;
console.log(copy)	// { a: 2 }
console.log(obj);	// { a: 1 }

Object.assign()의 첫번째 인자에 빈 객체를 전달해서 copy에 할당하였다.

이렇게 복제된 copy 객체는 속성을 변경해도 obj 객체에 적용되지 않는다.

깊은 복사 주의점

let obj1 = { a: 0 , b: { c: 0}};
let obj2 = Object.assign({}, obj1);
// JSON.stringify() 메서드는 JavaScript 값이나 객체를 JSON 문자열로 변환한다.
console.log(JSON.stringify(obj2));	// { a: 0, b: { c: 0}}

obj2.a = 2;
console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 0}}
console.log(JSON.stringify(obj2)); // { a: 2, b: { c: 0}}
//
obj2.b.c = 3;
console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 3}}
console.log(JSON.stringify(obj2)); // { a: 2, b: { c: 3}}

위의 예시에서 obj2 객체는 obj1의 속성이 복제되었다.

Object.assign()의 첫번째 인자에 빈 객체를 전달했고 다음 인자에 obj1을 전달했기 때문에 obj1이 복사된 새로운 객체가 obj2에 할당되었다.

그런데 obj2.b.c = 3; 에서 obj1의 속성 또한 변경되었다.

이는 Object.assign()으로 객체를 복사할 때 속성이 참조 자료형일 경우 참조 값인 주소가 복사되기 때문이다.

Reference

mdn - Object.assign()
mdn - JSON.stringify()