객체 상태의 불변성을 어떻게 유지할까요?

이렇게 답해 보세요 (핵심 답변)

JavaScript에서 객체 상태의 불변성을 유지하려면 기존 객체나 배열을 직접 수정(mutation)하지 않고, 변경이 필요한 경로마다 새로운 객체나 배열을 만들어 교체해야 합니다. 예를 들어 객체는 전개 연산자(...)로 변경될 계층을 새로 만들고, 배열은 push나 sort 대신 map, filter, toSorted 같은 비변이 메서드로 새 배열을 반환받습니다. 이때 변경되지 않은 나머지 하위 참조는 그대로 재사용(구조적 공유)하면 불필요한 전체 복사 비용을 줄이면서도 참조 비교(===)로 상태 변경 여부를 빠르게 감지할 수 있습니다.

함께 설명하면 좋은 이유 (꼬리질문 대비)

1. const 선언은 변수 재할당만 막고 Object.freeze()도 기본적으로 1단계 프로퍼티만 동결하므로 중첩 객체까지 자동으로 불변이 되지는 않습니다.
2. React 같은 UI 라이브러리에서는 이전 상태와 새 상태의 참조가 달라져야 화면 갱신 대상을 정확하게 판별할 수 있습니다.

면접에서 자주 하는 실수

map이나 slice로 새 배열 껍데기를 만들었더라도 그 안의 요소 객체를 직접 수정하면 원본 배열이 가리키는 객체도 함께 변한다는 점을 주의해야 합니다.