얕은 복사와 깊은 복사를 파헤쳐보자

얕은복사,깊은복사란?

깊은 복사란 우리가 흔히 생각하는 복사이다. 값을 복제하여 변경해도 원본 값은 변경되지 않는다.
얕은 복사란 값이 저장된 메모리의 주소를 복사하는 것이다. 복사하는 대상이 값인 경우에는 값이 그대로 복사되지만 배열이나 문자열 같은 객체는 값이 복사되지 않고 주소가 복사된다.

얕은 복사의 문제점

이렇게 되면 얕은 복사의 문제점이 나온다. 얕은 복사를 이용하는 경우 주소가 복사되는 것이기에 내가 새로 선언한 변수를 이용하여 값을 바꾸려고 시도하는 경우 같은 주소를 가르키는 원본의 값도 변경된다. 깊은 복사의 경우 값을 복사해 메모리에 따로 할당한다.얕은 복사는 가르키는 주소가 같기 때문에 주소가 공유되고 있는 값이 바뀐다면 그와 관련된 모든 변수들의 값이 바뀌는걸 주의하자.

Javascript에서 깊은 복사 하는 방법

오래된 구형 방식

복사
const original = { name: "철수", info: { age: 20 } };

const copy = JSON.parse(JSON.stringify(original));

copy.info.age = 30;

console.log(original.info.age); // 20

현대적인 방식

복사
const original = { name: "철수", info: { age: 20 } };

const copy = structuredClone(original);

copy.info.age = 30;

console.log(original.info.age); // 20

방식을 잘 선택해야 하는게 구형 방식의 경우에는 객체를 JSON문자열로 직렬화 시켜 객체 개념을 사라지게 한 다음 parse로 새 객체를 만드는 방식이라 JSON 규격에 없는 함수,Date,Map같은 객체는 복사할 수 없다.

프론트엔드와 서버의 통신에서 JSON이 사용되는 이유

브라우저와 서버가 데이터를 주고 받기 위해서는 문자열만 이용해서 주고 받아야 한다.
객체 자체로는 전송이 불가능하기 때문이다. 그래서 객체를 직렬화(객체 -> 문자열)하여 전송한다.
반대로 서버에서 데이터를 받으면 역직렬화(문자열 -> 객체)하여 나타낸다