JavaScript 엔지니어들이 원시값(Primitive)과 객체(Object)의 메모리 참조 차이를 이해하여 의도하지 않은 객체 변경으로 인한 버그 방지

JS Object: Reference vs Copying

Muhammad iqbal2026년 3월 29일1분beginner

AI 요약

Context

JavaScript에서 변수 할당 시 원시값(String, Number, Boolean)과 객체(Object, Array, Function)가 서로 다른 메모리 메커니즘을 따르기 때문에, 개발자가 참조와 복사의 차이를 모르면 불의의 부작용이 발생한다.

Technical Solution

원시값과 객체의 메모리 저장 방식 구분: 원시값은 실제 값을 복사, 객체는 메모리 주소(참조)를 복사
객체 동등성 비교 시 메모리 주소 기반 비교 인식: {} === {}는 false (동일한 구조여도 서로 다른 메모리 위치)
const 키워드의 실제 동작 범위 이해: const는 변수 재할당을 방지하나 객체의 속성 수정은 허용
함수 인자로 객체 전달 시 발생하는 부작용 방지: 함수 내부에서 객체 속성 수정 시 원본 객체가 변경됨

Key Takeaway

JavaScript에서 const 변수도 객체 속성을 수정할 수 있다는 점과 함수에 객체를 전달할 때 참조가 복사되어 원본이 변경될 수 있다는 점을 명확히 이해해야 의도하지 않은 상태 변경 버그를 방지할 수 있다.

실천 포인트

JavaScript 프로젝트에서 객체를 함수 매개변수로 전달할 때, 함수 내부에서 해당 객체의 속성을 직접 수정하면 호출자의 원본 객체가 변경되므로, 필요한 경우 객체 스프레드 연산자나 Object.assign()을 사용하여 얕은 복사본을 생성한 후 수정하거나, 함수가 객체를 변경하지 않음을 명시적으로 설계해야 한다.

태그

#JavaScript #Memory #Reference #Mutation #Object

원문 읽기