JSON.parse(JSON.stringify(obj)) 의미

개발하다 보면 아래와 같은 코드들이 보인다.

const tmp: Channel[] = JSON.parse(JSON.stringify(channels))

 

이 의미를 알 지 못한다면, 왜 불필요한 작업을 진행하는지 이해 할 수 없다.

stringify와 parse는 연산 속도도 느린데...

 

이 패턴은 객체를 깊은 복사를 하기 위해 사용하는 방법

이 과정을 거치면 원본 객체의 참조와 완전히 끊어진 새로운 객체가 만들어 진다.

 

얕은 복사(shallow copy)

const copy = [...array] 나 const copy = {...obj} 처럼 spread나 Object.assigin을 쓰면 1단계 깊이까지 복사되고, 그 안에 있는 개체나 배열은 여전히 원본과 같은 참조를 가진다.

const a = [{x: 1}];
const b = [...a];  // b[0]는 a[0]과 같은 객체를 참조

a[0].x = 999;
console.log(b[0].x); // 999 (둘 다 같은 객체를 가리킴)

 

깊은 복사(deep copy)

중첩된 객체/배열까지 새로 만들어서 완전히 복사합니다. 그래서 복사본을 수정해도 원본에 영향이 없습니다.