[JavaScript] structuredClone, JSON.stringify(), cloneDeep, 재귀적 탐색 - 깊은 복사

얕은 복사 는 여기서 ☑️

🎯 원본을 유지하면서 복사하는 방법: 깊은 복사 (Deep Copy)

깊은 복사를 사용하면 중첩된 객체까지 복사해서 원본을 안전하게 보호할 수 있다.

1️⃣ structuredClone 사용하기 (최신 방법)

structuredClone()은 중첩된 객체를 포함한 깊은 복사를 지원한다.

const obj = { a: { x: 1 } };
const copy = structuredClone(obj);

copy.a.x = 99;
console.log(obj.a.x); // 1 (원본은 유지됨)

• structuredClone()은 브라우저와 *Node.js 버전이 최신일 때 사용할 수 있다.

2️⃣ JSON 방식 사용하기 (간단하지만 한계 있음)

const obj = { a: { x: 1 } };
const copy = JSON.parse(JSON.stringify(obj));

copy.a.x = 99;
console.log(obj.a.x); // 1 (원본은 유지됨)

한계:

• 함수, undefined, Symbol같은 값은 복사되지 않음.
• 순환 참조(객체가 자기 자신을 참조하는 경우)는 처리하지 못함.

3️⃣ Lodash의 cloneDeep 사용하기 (강력한 라이브러리)

https://lodash.com/docs/4.17.15#cloneDeep

const _ = require('lodash');

const obj = { a: { x: 1 } };
const copy = _.cloneDeep(obj);

copy.a.x = 99;
console.log(obj.a.x); // 1 (원본은 유지됨)

• 장점: 다양한 데이터 구조와 복잡한 객체도 문제없이 처리 가능.

4️⃣ 수동으로 *재귀를 이용한 깊은 복사

작은 객체라면 재귀적으로 복사하는 코드를 직접 작성할 수도 있다.

function deepCopy(obj) {
	if (obj === null || typeof obj !== 'object') {
    	return obj; // 기본 자료형은 그대로 반환
    }
    
    const copy = Array.isArray(obj) ? [] : {};
    for (const key in obj) {
    	if (obj.hasOwnProperty(key)) {
        	copy[key] = deepCopy(obj[key]); //재귀적으로 복사
        }
    }
    return copy;
}

const obj = { a: { x: 1 } };
const copy = deepCopy(obj);

copy.a.x = 99;
console.log(obj.a.x); // 1 (원본은 유지됨)

✨ 결론

• 최신 환경: structuredClone을 추천.
• 간단한 데이터: JSON.parse(JSON.stringify).
• 복잡한 객체: Lodash의 cloneDeep.
• 직접 구현: 재귀 함수로 처리.

---

*Node.js: JavaScript를 서버나 로컬에서 실행할 수 있게 해주는 환경.
*재귀: 함수가 자기 자신을 다시 호출하는 것. 반복적인 작업을 수행할 때 많이 사용됨.

---

💬 짚고 넘어가기

🛠️ 재귀와 반복문의 차이

• 재귀: 함수 호출로 문제 해결
  -재귀의 기본 구조
  • 기저 조건(Base Case): 재귀를 멈추는 조건.
  • 자기 호출(Self-Call): 함수가 자기 자신을 호출.
• 반복문: for, while같은 루프를 사용

 // 재귀: 1부터 n까지의 합
 function sumRecursive(n) {
 	if (n === 1) return 1; // 기저 조건
    return n + sumRecursive(n - 1); //자기 자신 호출
 }
 
 // 반복문: 1부터 n까지의 합
 function sumLoop(n) {
 	let sum = 0;
    for (left i = 1; i <= n; i++) {
    	sum += i;
    }
 	return sum;
 }

console.log(sumRecursive(5)); // 15
console.log(sumLoop(5)); // 15