깊은 복사 vs 얕은 복사: JavaScript에서의 완전 가이드
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발
대상자
JavaScript 초보 개발자 및 중급자 (난이도: 중간)
핵심 요약
- 값 타입(
number,string,boolean)은 복사 시 새로운 값이 생성되며 원본에 영향을 주지 않음 - 참조 타입(객체, 배열)은 얕은 복사 시 원본과 동일한 메모리 주소를 가짐
- 깊은 복사는
JSON.parse(JSON.stringify())또는deepClone()함수로 구현되어 완전히 독립적인 객체 생성 가능
섹션별 세부 요약
1. 값 타입과 참조 타입의 차이
- 값 타입(primitive type)은 메모리에 직접 저장되며 복사 시 새로운 값이 생성됨
- 참조 타입(object, array)은 메모리 주소를 저장하고 복사 시 같은 주소를 참조하게 됨
- 예시:
let a = {x:10}; let b = a; b.x = 20;→a.x도 20으로 변경됨
2. 얕은 복사의 문제점
Object.assign()또는 확장 연산자(...)로 복사 시 하위 객체/배열은 여전히 참조됨- 예시:
let a = {x: {y: 10}}; let b = {...a}; b.x.y = 20;→a.x.y도 20으로 변경됨 - 불변성 유지 실패로 인해 예상치 못한 오류 발생 가능
3. 깊은 복사의 해결 방안
JSON.parse(JSON.stringify())로 단순한 데이터 구조 복사 가능 (함수,undefined제외)lodash의_.cloneDeep()또는 직접 구현한deepClone()함수로 하위 객체까지 재귀적으로 복사- 불변성(immutability) 유지에 필수적
결론
- 값 타입은 복사 시 영향 없음, 참조 타입은 얕은 복사 시 원본 변경
- 깊은 복사는
JSON.parse(JSON.stringify())또는lodash활용 - 복사 시 불변성을 유지하여 예상치 못한 데이터 오염 방지