자바스크립트 - 깊은 복사 (Deep Copy)

자바스크립트 전체 링크

 

자바스크립트에서 object를 "=" 로 받아오면 참조만 한다.

아래의 코드에서 a의 color를 변경하였는데, b도 변경됨을 알 수 있다. 

얕은 복사(shallow copy)

 

깊은 복사의 가장 간단한 방법은 object를 문자열로 바꾸고, 그 문자열을 다시 object로 바꾸는 것이다.

JSON.stringify에 a를 넘겨주면 text로 된 object를 return한다.

 

JSON.parse를 이용하면 문자열을 object로 변경해준다.

 

JSON.parse는 object 형태의 문자열만 parsing한다. 따라서 parsing이 불가능한 경우는 SyntaxError를 뱉는다.

 

이제 a의 color를 blue로 변경해도, b는 변경되지 않음을 알 수 있다. (deep copy)

 

함수로 만들면 아래와 같이 만들 수 있다.

export function deepCopy(obj) {
  return JSON.parse(JSON.stringify(obj));
}