Object.assign()

Object.assign() 메소드는 하나 혹은 그 이상의 source 객체의 열거 가능한 모든 속성을 복사해서 target 객체에 붙여넣은 후 target 객체를 return 한다. 

 

const target = { a: 1, b: 2 };
const source = { b: 4, c: 5 };

const returnedTarget = Object.assign(target, source);

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

console.log(returnedTarget === target);
// Expected output: true

 

복수의 source 객체도 가능하다.

// syntax 
Object.assign(target, source1, source2)
Object.assign(target, source1, source2, /* …, */ sourceN)

// example
const target = { a: 1, b: 2 };
const source1 = { b: 4, c: 5 };
const source2 = { c: 6, d: 8 };

const returnedTarget = Object.assign(target, source1, source2);

console.log(target);
// Expected output: {a: 1, b: 4, c: 6, d: 8}

 

사용법

1) 객체 복사 

Object.assign()은 속성의 값을 복사하기 때문에 깊은 복사를 수행하려면 다른 방법을 사용해야 한다. 만약 source 값이 객체에 대한 참조인 경우, 참조 값만 복사한다. 

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

 

2) 객체 병합

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 }

 

Object.assign()을 처음 본 건 부트캠프에서 redux를 배울 때 리듀서 함수에서 기존 상태 값을 보존하면서 새로운 상태를 리턴하는 순수 함수를 작성하는 코드에서였다. 데이터의 불변성(immutability)를 지키려고 할 때 사용할 수 있는 메소드이다. 

const itemReducer = (state = initialState, action) => {
  switch (action.type) {
    case ADD_TO_CART:
      return Object.assign({}, state, {
        cartItems: [...state.cartItems, action.payload]
      })
    default:
      return state;
  }
}

 

사실 Object.assign()이 하는 역할을 아래와 같이 spread 구문으로 작성하는 게 더 간결하고 가독성이 좋기 때문에 직접 작성하는 코드에서 Object.assign()을 사용할 일은 거의 없다. 

const itemReducer = (state = initialState, action) => {
  switch (action.type) {
    case ADD_TO_CART:
      return {
        ...state,
        cartItems: [...state.cartItems, action.payload]
      };
    default:
      return state;
  }
}

 

스프레드 구문은 ES6에서 처음 도입된 문법이고, ES6는 2015년에 공식 발표되었다. 최근 서드파티 라이브러리 소스 코드를 들여다볼 일이 많은데, 2020년 이전에 작성된 라이브러리들에서는 Object.assign() 메소드가 자주 보인다. 2023년에 리액트 함수형 컴포넌트가 아닌 클래스 컴포넌트를 직접 작성할 일은 없지만 클래스형 코드를 보고 이해하는 게 필요한 것처럼 Object.assign() 같은 메소드도 한 번 정리해두면 좋을 것 같아서 mdn 예제를 참고해 간단하게 포스팅을 작성해 보았다. 

 

아, Object.assign() mdn 문서의 한국어 버전과 영어 버전이 조금 다르다. 아마 한국어 문서가 최신화된 내용이 반영되지 않은 레거시 문서인 것 같다. 시간이 되면 번역해서 PR하면 좋겠건만 과연.. 

mdn 오픈소스 한국어 번역에 기여하고 싶은 분들은 여기를 참고해서 번역한 후 PR하시면 좋을 것 같습니다!