TIL_2025-02-17

깊은 복사와 얕은 복사

 

 

 

 

 

우선 깊은 복사와 얕은 복사 사용하는 이유

얕은 복사는 메모리 사용을 효율적으로 하고 속도가 빠르기 때문에

기존에 사용하던 메모리의 위치에서 객체의 최상위 속성만 복사하고

하위 객체는 참조하여 공유하는 방식으로 사용하기 때문입니다.

 

깊은 복사는 모든 속성을 재귀적으로 복사하여 독집적인 객체를 만들기 때문에

메모리 사용량이 증가하고 성능이 저하되지만 원본 객체와의 독립성을 보장합니다.

얕은 복사

얕은 복사는 객체의 최상위 레벨만 복사합니다.
객체 내의 속성이 다른 객체를 참조하는 경우
해당 참조는 복사하지 않고 원본 객체와 동일한 참조를 유지합니다.
복사한 객체의 속성을 변경하면 원복 객체에 영향을 미칩니다.

얕은 복사는 원본을 참조합니다.

const original = { a: 1, b: { c: 2 } };
const shallowCopy = Object.assign({}, original);

// 얕은 복사 후 하위 객체를 변경
shallowCopy.b.c = 3;

console.log(original.b.c); // 3 (원본도 변경됨)
console.log(shallowCopy.b.c); // 3

Object.assign();

const original = { a: 1, b: { c: 2 } };
const shallowCopy = { ...original };

// 얕은 복사 후 하위 객체를 변경
shallowCopy.b.c = 3;

console.log(original.b.c); // 3 (원본도 변경됨)
console.log(shallowCopy.b.c); // 3

... 전개 연산자

const originalArray = [1, 2, [3, 4]];
const shallowCopyArray = originalArray.slice();

// 얕은 복사 후 하위 배열을 변경
shallowCopyArray[2][0] = 99;

console.log(originalArray[2][0]); // 99 (원본도 변경됨)
console.log(shallowCopyArray[2][0]); // 99

배열

깊은 복사

깊은 복사는 객체를 완전히 복사하여
모든 레벨의 속성을 새롭게 생성합니다.
복사한 객체의 속성을 변형해도
원복 객체는 영향을 미치지 않습니다.

깊은 복사는 원본을 참조하지 않습니다.

const original = { a: 1, b: { c: 2 } };
const deepCopy = JSON.parse(JSON.stringify(original));

// 깊은 복사 후 하위 객체를 변경
deepCopy.b.c = 3;

console.log(original.b.c); // 2 (원본은 변경되지 않음)
console.log(deepCopy.b.c); // 3

JSON.stringify();
객체를 JSON문자열로 변환합니다.
객체의 모든 속성이 문자열 형태로 변환됩니다.

JSON.parse();
JSON 문자열을 다시 객체로 변환합니다.
새로운 객체가 생성되어 원본 객체와는 별개의 깊은 복사가 일어납니다.

function deepCopy(obj) {
    if (obj === null || typeof obj !== 'object') {
        return obj; // 원시 값 반환
    }

    const copy = Array.isArray(obj) ? [] : {};

    for (const key in obj) {
        copy[key] = deepCopy(obj[key]); // 재귀 호출
    }

    return copy;
}

const original = { a: 1, b: { c: 2 } };
const deepCopyResult = deepCopy(original);

// 깊은 복사 후 하위 객체를 변경
deepCopyResult.b.c = 3;

console.log(original.b.c); // 2 (원본은 변경되지 않음)
console.log(deepCopyResult.b.c); // 3

재귀함수

// Lodash 라이브러리 포함
import _ from 'lodash';

const original = { a: 1, b: { c: 2 } };
const deepCopy = _.cloneDeep(original);

// 깊은 복사 후 하위 객체를 변경
deepCopy.b.c = 3;

console.log(original.b.c); // 2 (원본은 변경되지 않음)
console.log(deepCopy.b.c); // 3

Lodash 모듈