javascript 인터뷰 문제: JavaScript에서 deepClone 구현 방법
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발
대상자
초보자 및 JavaScript 객체 복사 기술을 학습하고자 하는 개발자
핵심 요약
- 깊은 복사(deepClone)는 중첩 객체/배열을 참조 없이 복사하여 상태 관리(React, Redux 등)에 필수적
- shallowClone의 문제점: 참조를 유지해 원본 변경 시 복사본도 영향을 받음
- JSON.parse(JSON.stringify())와 재귀적 복사 함수가 주요 구현 방법으로 사용됨
섹션별 세부 요약
1. 문제 정의 및 배경
- deepClone이 필요한 상황: React 상태 관리, Redux 액션 payload 등에서 객체의 참조 문제 방지
- shallowClone의 한계: 배열, 객체 내부의 중첩 구조는 복사하지 않음
2. JSON 기반 구현 방법
- JSON.stringify() + JSON.parse()로 간단하게 구현 가능
- 단점: 함수, undefined, Symbol 등 JSON에서 지원하지 않는 데이터 타입을 제외함
- 예시 코드:
```javascript
function deepClone(obj) {
return JSON.parse(JSON.stringify(obj));
}
```
3. 재귀적 함수 기반 구현
- 객체/배열의 자기 자신을 재귀적으로 복사하여 참조 문제 해결
- Symbol, 함수, Map, Set 등 복잡한 타입을 처리 가능
- 예시 코드:
```javascript
function deepClone(obj, map = new WeakMap()) {
if (obj instanceof Date) return new Date(obj);
if (obj instanceof RegExp) return new RegExp(obj);
if (map.has(obj)) return map.get(obj);
if (obj && typeof obj === 'object') {
map.set(obj, {});
for (let key in obj) {
map.get(obj)[key] = deepClone(obj[key], map);
}
return map.get(obj);
}
return obj;
}
```
4. 고급 고려사항
- 순환 참조(circular reference) 처리: WeakMap을 사용하여 이미 복사된 객체를 추적
- 성능 최적화: JSON 기반은 간단하지만, 대규모 데이터는 재귀 함수가 효율적
결론
- JSON.stringify는 간결하지만, 복잡한 데이터 타입과 순환 참조는 재귀 함수로 구현하는 것이 안정적
- 실제 프로젝트에서는 lodash의 _.cloneDeep() 같은 라이브러리를 사용하는 것이 권장됨