AI Store에서 AI코딩으로 만들어진 앱을 만나보세요!
지금 바로 방문하기

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() 같은 라이브러리를 사용하는 것이 권장됨