javaScript Object 덮어쓰기

공부는 혼자하는 거·2021년 9월 4일
0

React Tip

목록 보기
19/24

Object.assign

타겟을 지정한 객체로 다른 객체의 속성을 복사한다.

기본형 예제

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

https://paigelog.netlify.app/blog/react/react_20200320/

profile
시간대비효율

0개의 댓글