깊은 복사 & 얕은 복사에 대해 알아보자

안녕하세요. 오늘은 깊은 복사와 얕으 복사에 대해 정리하려고 합니다. 기본 개념이 약해서 꾸준히 공부해 나갈려고 합니다.

---

자바스크립트의 얕은 복사와 깊은 복사

자바스크립트에서 객체를 복사하는 방법은 크게 두 가지로 나눌 수 있습니다: 얕은 복사(Shallow Copy)와 깊은 복사(Deep Copy). 이 두 가지 방법은 객체의 프로퍼티를 어떻게 복사하는지에 따라 다릅니다.

1. 얕은 복사 (Shallow Copy)

얕은 복사는 객체의 프로퍼티를 그대로 복사하지만, 중첩된 객체의 경우 참조(reference)만 복사합니다. 즉, 원본 객체와 복사된 객체가 중첩된 객체를 공유하게 됩니다.

얕은 복사 방법

1. Object.assign(): 하나 이상의 소스 객체로부터 타겟 객체로 프로퍼티를 복사합니다.
2. Spread 연산자(…): 객체를 펼쳐서 새로운 객체를 생성합니다.

let original = { name: "John", address: { city: "New York" } };

// Object.assign
let copy1 = Object.assign({}, original);

// Spread 연산자
let copy2 = { ...original };

// 얕은 복사된 객체의 수정
copy1.name = "Jane";
copy1.address.city = "Los Angeles";

console.log(original.name); // John
console.log(original.address.city); // Los Angeles (원본 객체도 영향을 받음)

위의 예시에서 copy1은 original 객체의 얕은 복사본입니다. name 프로퍼티를 변경해도 original 객체는 영향을 받지 않지만, 중첩된 address 객체의 city 프로퍼티를 변경하면 original 객체도 영향을 받습니다.

2. 깊은 복사 (Deep Copy)

깊은 복사는 객체의 모든 프로퍼티를 재귀적으로 복사하여 완전히 새로운 객체를 생성합니다. 원본 객체와 복사된 객체는 중첩된 객체까지도 완전히 독립적입니다.

깊은 복사 방법

1. JSON.parse와 JSON.stringify: 객체를 JSON 문자열로 변환한 후 다시 객체로 변환합니다. (단, 함수나 undefined는 복사되지 않음)
2. 재귀적 복사 함수: 객체의 모든 프로퍼티를 재귀적으로 복사하는 함수 작성
3. Lodash의 cloneDeep: 서드 파티 라이브러리 사용

let original = { name: "John", address: { city: "New York" } };

// JSON.parse와 JSON.stringify
let copy1 = JSON.parse(JSON.stringify(original));

// 깊은 복사된 객체의 수정
copy1.name = "Jane";
copy1.address.city = "Los Angeles";

console.log(original.name); // John
console.log(original.address.city); // New York (원본 객체는 영향을 받지 않음)

위의 예시에서 copy1은 original 객체의 깊은 복사본입니다. copy1의 프로퍼티를 변경해도 original 객체는 전혀 영향을 받지 않습니다.

재귀적 깊은 복사 함수 예시

function deepClone(obj) {
    if (obj === null || typeof obj !== 'object') {
        return obj;
    }

    if (Array.isArray(obj)) {
        let arrCopy = [];
        for (let item of obj) {
            arrCopy.push(deepClone(item));
        }
        return arrCopy;
    }

    let objCopy = {};
    for (let key in obj) {
        if (obj.hasOwnProperty(key)) {
            objCopy[key] = deepClone(obj[key]);
        }
    }
    return objCopy;
}

let copy2 = deepClone(original);
copy2.address.city = "San Francisco";

console.log(original.address.city); // New York (원본 객체는 영향을 받지 않음)

3. 얕은 복사와 깊은 복사의 차이점 요약

• 얕은 복사: 객체의 최상위 프로퍼티만 복사하고 중첩된 객체는 참조를 공유합니다.
• 깊은 복사: 객체의 모든 프로퍼티를 재귀적으로 복사하여 완전히 독립적인 객체를 생성합니다.

얕은 복사와 깊은 복사에 대한 이해가 도움이 되셨길 바랍니다.

오늘도 필자의 부족한 글 읽어 주셔서 감사합니다.