Reference type을 깊은 복사 하는 법

이 글을 쓰게 된 이유

데이터의 메모리 할당을 공부하던 중에 Reference type을 깊은 복사 하는 방법은 없을까? 라는 의문이 들어서 그 방법을 찾아보았다. 자바스크립트를 공부한지 얼마되지 않아서 내용이 많이 부족하고 틀린내용도 있을 것입니다. 그런 점을 발견하신다면 말씀해주세요!

JSON.parse

첫번째 방법은 JSON.parse(JSON.stringify())를 사용하는 것이다.

let arr1 = ['kim', 'lee'];
let arr2 = arr1


arr2[0] =' park';

console.log(arr1);
console.log(arr2);
-----------------------------------------
result

[ ' park', 'lee' ]
[ ' park', 'lee' ]

위와 같은 코드를 작성하였을 때 생기는 문제점이 얕은 복사로 인해 arr1의 0번째 인덱스도 같이 바뀐다는 것이다.

만약 arr1의 값은 그대로 유지하고 arr2의 값만 변경하고 싶다면 이렇게 작성하면 된다.

let arr1 = ['kim', 'lee'];
let arr2 = JSON.parse(JSON.stringify(arr1));


arr2[0] =' park';

console.log(arr1);
console.log(arr2);
-------------------------------------
result

[ 'kim', 'lee' ]
[ ' park', 'lee' ]

arr1의 값은 유지된채로 arr2의 값만 바뀐것을 볼 수 있다.

(제가 피그마에서 그린 그림입니다.)

원래대로라면 1001번의 arr1과 1002번의 arr2가 같은 5001번을 바라보고 있어야한다.

하지만 1002번의 arr2는 5001번이 아닌 5002번을 참조하고 있다.

그 이유는 메모리에 할당된 데이터의 타입이 바뀌면 그 메모리는 참조하고 있는 대상을 끊고 다른 메모리에 값을 할당한다고 한다.
그래서 5002번에 값이 할당되고 그것을 arr2가 참조하고 있는 것이다.

5001번과 5002번은 서로 다른 객체이기 때문에 5002번의 값이 바뀐다고 해도 1001번의 arr1의 값은 바뀌지 않는 것이다.