[JavaScript] Object.assign()

 

 

객체를 여러 개 받아 하나의 객체로 합쳐 반환하는 함수를 만들어라.(단, 원본 객체들은 수정하지 않아야 한다.)라는 미션(?)을 받았다.

 

주의!! 여기서부터 오답잔치입니다!!! 

---

function mergeObjs(...objs) {
	return ...objs
}

이건가? 

땡!

 

일단 나는 여러개의 배열이 들어오면서 차곡차곡 쌓여서.. return할 때도 그대로 내보내면 될 줄 알았다.🤣

하지만 그건 나만의 생각ㅎ

 

저렇게 여러 개의 매개변수를 스프레드 형식으로 받으면 매개변수는 배열의 형태로 들어온다.

function mergeObjs(...objs) {
  console.log(objs); // [{ x: 1, y: 2 },{ y: 3, z: 4 )]
  console.log(...objs); // { x: 1, y: 2 } { y: 3, z: 4 )
  return ...objs
}

const a = { x: 1, y: 2 };
const b = { y: 3, z: 4 );
mergeObjs(a,b);

 

그래서 objs를 콘솔에 찍으면 배열에 매개변수들이 담긴 채로 출력이 되고,

내가 return한 ...objs들은 그냥 받은 객체 그대로의 나열이 된다.

지금 생각해보니 정말 멍청하군..😅

 

그래서 그 다음으로 작성한 코드가

function mergeObjs(...objs) {
  return Object.assign(...objs);
}

const a = { x: 1, y: 2 };
const b = { y: 3, z: 4 );
console.log(mergeObjs(a,b)); // { x: 1, y: 3, z: 4 }

콘솔을 찍어보니 잘 작동하는 것 같았다.

하지만 테스트 코드를 돌려보니 오류가 발생했는데..

콘솔을 찍어보니 원본 객체들이 바뀌어버렸다.

 

뭐야! 뭐가 문젠데 mdn 문서를 찾아보자.

---

* 여기서부터 제대로 된 코드

출처 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/assign

 

아. assign은 첫 번째 매개변수로 ...sources들이 들어갈 객체를 받는구나.

그래서 내가 작성한 코드는 객체a에 객체b가 담겼던 것이다.

즉 객체a의 원본이 수정됐다.

 

문제에 맞춰 제대로 코드를 수정하면

function mergeObjs(...objs) {
  return Object.assign({},...objs);
}

const a = { x: 1, y: 2 };
const b = { y: 3, z: 4 );
console.log(mergeObjs(a,b)); // { x: 1, y: 3, z: 4 }

 

 

잘 작동한다!!