2차원(이상인) 객체의 깊은 복사: JSON.parse + JSON.stringify

스프레드 연산자 (...)를 이용해서 배열이나 객체를 깊은복사 하고는 한다.

const originArray = [1,2,3]

const copiedArray = [...originArray]

이렇게 스프레드 연산자를 이용하면 copiedArray는 originArray와 똑같이 생겼지만 originArray를 참조하지 않는다.

---

하지만 2차원 이상의 경우에는 내용을 얕은복사하게 된다.

 

 

    const totalTimezoneData = [...graph[0]];

    for (let i = 1; i < graph.length; i++) {

     // ...

    }

    graph.unshift(totalTimezoneData);

 

배열에 객체가 포함되어 있는 데이터를 업데이트 하기 위한 함수이다.

 [...graph[0]];

 

 

graph[0] = graph[1] + graph[2] 
의 결과를 예상하고 이와 같이 스프레드 연산자를 이용하여 객체를 복사했다고 생각했지만,

실행 결과는 

graph[0] = graph[1] , graph[2]
로 graph[0]과 graph[1]이 같아져버리는 얕은 복사를 한 결과가 나타났다.
totalTimezoneData 와 이후에 업데이트를 위해 참조한 다른 배열의 값이 함께 변경되는 것이었다.

 

 

이 문제를 해결하려면 아래와 같이 JSON 형태로 파싱을 한 뒤 객체 형태로 되돌리면 된다.

 

    const totalTimezoneData = JSON.parse(JSON.stringify(graph[0]));

    for (let i = 1; i < graph.length; i++) {

     // ...

    }

    graph.unshift(totalTimezoneData);

 

그러면 동일한 형태의 객체를 깊은복사한 데이터를 얻을 수 있게 된다.