진짜 어이없는 버그로 두 시간을 날려서 질문 올려요. 객체를 복사해서 값을 바꿨는데 원본까지 같이 바뀌는 현상이 있어서요. 처음엔 제가 코드를 잘못 짠 줄 알았는데 아무리 봐도 복사를 했거든요.


const original = { name: "철수", info: { age: 20 } };
const copy = { ...original };
copy.info.age = 99;
console.log(original.info.age); // 99 ???


스프레드로 복사하면 새 객체가 되는 줄 알았는데 왜 original 의 age 까지 99 로 바뀌나요? copy 만 바꿨잖아요. name 같은 건 안 그러는데 info 안쪽 값만 이래요. 뭔가 겉은 복사되고 속은 공유되는 그런 느낌인데 이게 얕은 복사라는 그건가요?


그래서 찾아보니 JSON 으로 돌리는 방법이 나오더라고요.


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


이걸로 하니까 원본이 안 바뀌긴 했어요. 근데 이 방법이 함수나 undefined, Date 같은 건 다 날아간다는 경고도 봤어요. 실제로 Date 를 넣었더니 문자열로 바뀌어 있더라고요.


그리고 structuredClone 이라는 것도 있다던데 이건 또 뭔가요? 이게 요즘 정석인가요? 제가 궁금한 건 정리하면 이거예요. 언제 얕은 복사만 해도 충분하고 언제 깊은 복사가 필요한지, 그리고 깊은 복사를 해야 한다면 JSON 방식이랑 structuredClone 중에 뭘 써야 하는지요. 중첩이 있는 객체를 다룰 때마다 이 문제로 겁이 나서 확실히 정리하고 싶어요.