타겟을 지정한 객체로 다른 객체의 속성을 복사한다.
기본형 예제
const target = { a: 1, b: 2 };
const source = { b: 4, c: 5 };
const returnedTarget = Object.assign(target, source);
console.log(target);
console.log(returnedTarget);
출력은 아래와 같다.
{ a: 1, b: 4, c: 5 }
{ a: 1, b: 4, c: 5 }
기존 target 객체의 속성이 변경되거나 추가되었다.
리턴으로 받은 returnedTarget 객체는 사실 target 객체와 같은 객체를 참조하고 있다.
console.log(target === returnedTarget); // true
같은 속성 이름(키)이 있다면 덮어쓰기가 되며, 새로운 속성 이름이 source에 있다면 target 객체에 추가된다.
source가 여러 개 있을 때도 동일하게 동작한다.
const target = { a: 1, b: 2 };
const sources = [
{ b: 4, c: 5 },
{ b: 6, c: 7, d: 8 },
{ b: 9, c: 10, d: 11 },
{ b: 12, c: 13, d: 14, e: 15 },
];
Object.assign(target, ...sources);
console.log(target);
스프레드 연산자로 sources 리스트를 펼쳐서 인자를 넣어줘야 한다. 안 그러면 리스트의 index 값으로 키가 새로 생성되며 target에 속성이 추가된다.
// Object.assign(target, ...sources); 둘이 같다.
Object.assign(target, sources[0], sources[1], sources[2], sources[3]);
스트레드 연산자로 assign 해주면 출력은 아래와 같다.
{ a: 1, b: 12, c: 13, d: 14, e: 15 }
리스트를 그대로 assign 한다면? (...빼고 실행해보세요!)
{
'0': { b: 4, c: 5 },
'1': { b: 6, c: 7, d: 8 },
'2': { b: 9, c: 10, d: 11 },
'3': { b: 12, c: 13, d: 14, e: 15 },
a: 1,
b: 2
}
원형을 꼭 확인하고 사용하자!
sources 객체들 중에 속성 값으로 참조형이 존재한다면 깊은 복사가 이루어지지 않는다.
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const target = { arr: arr1 };
const source = {arr: arr2 };
Object.assign(target, source);
console.log(target.arr === source.arr); // true
깊은 복사를 원한다면 다른 방식을 활용하거나 응용하도록 하자.
Spread vs Object.assign
assign을 알기 전에 항상 스프레드 연산자를 활용하여 객체에 속성을 추가하거나 복사해줬다.
const target = { a: 1, b: 2 };
const source = { b: 4, c: 5 };
const newOb = {...target, ...source};
console.log(newOb); // { a: 1, b: 4, c: 5 }
역시나 출력은 assign과 같다.
불변성(immutable)을 지켜야 된다면 Object.assign을 사용하는 것 보다 스프레드 연산자를 사용하는 것이 좋다.
Object.assign으로 불변성을 지키지 못하는 것은 아닌데 target에 항상 {} 빈 객체를 인자로 전달해야 한다.
const obj = {
add: (a, b) => a + b,
};
const newObj = { ...obj };
console.log(newObj);
const copy = Object.assign({}, obj);
console.log(copy);
// obj 객체는 불변성
자세한 차이는 아래 Reference에 링크를 참조!
출처: https://bbaktaeho-95.tistory.com/96 [Bbaktaeho]
https://dongmin-jang.medium.com/javascript-15%EA%B0%80%EC%A7%80-%EC%9C%A0%EC%9A%A9%ED%95%9C-map-reduce-filter-bfbc74f0debd