Object.assign()과 스프레드(spread) 연산자와의 차이점

Object.assign()

map 형태의 자료형 object를 2개 이상을 합치고 싶을때, Object.assign() 함수를 사용할 수 있습니다. 예를들어, 아래와 같이 2개의 object가 있을때, Object.assign() 을 사용하면 하나의 object로 합칠 수 있습니다.

const userInfo = { name: '길동', age: 28 };
const address = { address: '서울특별시', addressDetail: '강남구' };

const nextUserInfo = Object.assign(userInfo, address);

console.log(nextUserInfo);
// Object { name: "길동", age: 28, address: "서울특별시", addressDetail: "강남구" }

 

여기서 주의할 점은 합쳐진 object와 첫번째 인자로 들어간 object는 같은 object라는 점입니다. 그래서 아래와 같이 console.log로 userInfo를 찍어보면 nextUserInfo와 동일한 값이 나옵니다. userInfo 값을 수정한 적은 없는데 말이죠.

console.log(userInfo);
// Object { name: "길동", age: 28, address: "서울특별시", addressDetail: "강남구" }

console.log(nextUserInfo === userInfo);
// true

 

그래서 기존 변수에 영향을 주지 않고, 새로운 object를 반환하여 불변성을 가지도록 하고 싶으면 아래와 같이 첫번째 인자에 빈 map 자료형을 넣어주는것이 좋습니다.

const userInfo = { name: '길동', age: 28 };
const address = { address: '서울특별시', addressDetail: '강남구' };

const nextUserInfo = Object.assign({}, userInfo, address);
console.log(nextUserInfo);
// Object { name: "길동", age: 28, address: "서울특별시", addressDetail: "강남구" }

 

구문

첫번째 인자는 타겟이되고, 두번째 인자부터는 가변인자를 입력받아서 여러개의 object를 입력할 수 있습니다.

Object.assign(target, ...sources)

 

따라서, 아래와 같이 사용할 수도 있습니다.

const winterInfo = Object.assign({ name: '윈터' }, { age: 25 }, { gender: 'female' }, { var1: 123 });
console.log(winterInfo);
// Object { name: "윈터", age: 25, gender: "female", var1: 123 }

 

spread 연산자

Object.assign과 비슷한 기능을 하는 spread 연산자도 있습니다. spread 연산자도 object를 합칠때 사용합니다. 예시를 들면

const userInfo = { name: '길동', age: 28 };
const address = { address: '서울특별시', addressDetail: '강남구' };

const nextUserInfo = { ...userInfo, ...address };

console.log(nextUserInfo);
// Object { name: "길동", age: 28, address: "서울특별시", addressDetail: "강남구" }

 

spread 연산자는 map 형태의 자료형 뿐만 아니라, 배열에서도 사용할 수 있습니다.

const arr1 = [1, 2, 3, 4, 5];
const arr2 = ['a', 'b', 'c'];
const mergedArr = [...arr1, ...arr2];

console.log(mergedArr);
// Array [1, 2, 3, 4, 5, "a", "b", "c"]

 

차이점

기능 동작시 큰 차이점은 없습니다. 즉, 아래 2개의 코드는 동일한 코드입니다.

const userInfo = { name: '길동', age: 28 };
const address = { address: '서울특별시', addressDetail: '강남구' };

// 아래 2개는 동일한 동작을 하는 코드
console.log(Object.assign({}, userInfo, address));
console.log({ ...userInfo, ...address });

 

Object.assign() 대신에 모던 자바스크립트에서 나온것이 spread 연산자로, 굳이 Object.assign()을 사용할 필요없이, 간단하게 spread 연산자를 사용하면 됩니다.