얕은 복사와 깊은 복사에 대해 설명해주세요

😄 자바스크립트에서 깊은 복사(Deep Copy)와 얕은 복사(Shallow Copy)는 객체나 배열과 같은 복합 데이터 구조를 복사할 때 중요한 개념입니다.

얕은 복사는 객체의 최상위 속성만 복사하고, 중첩된 객체는 원본과 참조를 공유합니다. 반면 깊은 복사는 객체의 모든 속성을 재귀적으로 복사하여 원본과 완전히 독립적인 복사본을 생성합니다. 따라서 깊은 복사된 객체를 수정해도 원본 객체에는 영향을 미치지 않습니다.

얕은 복사 (Shallow Copy)

얕은 복사는 객체나 배열의 최상위 레벨만 복사하고, 중첩된 객체나 배열은 원본과 참조를 공유합니다. 즉, 복사된 객체에서 중첩된 객체를 변경하면 원본 객체에도 영향을 미칩니다.

특징

• 최상위 속성만 복사됨.
• 중첩된 객체나 배열은 참조로 복사됨.
• 간단하고 빠르게 복사할 수 있음.

방법

1. Object.assign() 사용하기

   javascript
   코드 복사
   const original = { a: 1, b: { c: 2 } };
   const copy = Object.assign({}, original);
   
   copy.a = 10;
   copy.b.c = 20;
   
   console.log(original); // { a: 1, b: { c: 20 } }
   console.log(copy);     // { a: 10, b: { c: 20 } }
   

2. 전개 연산자 (...) 사용하기

   javascript
   코드 복사
   const original = { a: 1, b: { c: 2 } };
   const copy = { ...original };
   
   copy.a = 10;
   copy.b.c = 20;
   
   console.log(original); // { a: 1, b: { c: 20 } }
   console.log(copy);     // { a: 10, b: { c: 20 } }
   

깊은 복사 (Deep Copy)

깊은 복사는 객체나 배열의 모든 레벨을 재귀적으로 복사하여, 원본과 복사본이 완전히 독립적인 상태가 되도록 합니다. 중첩된 객체나 배열도 새로운 메모리 공간에 복사되므로, 복사본을 수정해도 원본에 영향을 미치지 않습니다.

특징

• 모든 레벨의 속성이 완전히 복사됨.
• 중첩된 객체나 배열도 새로운 참조로 생성됨.
• 원본과 복사본이 완전히 독립적임.

방법

1. JSON.parse와 JSON.stringify 사용하기

   const original = { a: 1, b: { c: 2 } };
   const copy = JSON.parse(JSON.stringify(original));
   
   copy.a = 10;
   copy.b.c = 20;
   
   console.log(original); // { a: 1, b: { c: 2 } }
   console.log(copy);     // { a: 10, b: { c: 20 } }
   

   주의: 이 방법은 함수, undefined, Symbol과 같은 JSON에 직렬화할 수 없는 값들을 복사할 수 없으며, 순환 참조가 있는 객체는 오류를 발생시킵니다.

2. 재귀 함수를 이용한 깊은 복사 구현

   function deepCopy(obj) {
     if (obj === null || typeof obj !== 'object') {
       return obj;
     }
   
     if (Array.isArray(obj)) {
       const arrCopy = [];
       for (let item of obj) {
         arrCopy.push(deepCopy(item));
       }
       return arrCopy;
     }
   
     const objCopy = {};
     for (let key in obj) {
       if (obj.hasOwnProperty(key)) {
         objCopy[key] = deepCopy(obj[key]);
       }
     }
     return objCopy;
   }
   
   const original = { a: 1, b: { c: 2 } };
   const copy = deepCopy(original);
   
   copy.a = 10;
   copy.b.c = 20;
   
   console.log(original); // { a: 1, b: { c: 2 } }
   console.log(copy);     // { a: 10, b: { c: 20 } }
   

3. lodash 라이브러리의 cloneDeep 사용하기

   const _ = require('lodash');
   
   const original = { a: 1, b: { c: 2 } };
   const copy = _.cloneDeep(original);
   
   copy.a = 10;
   copy.b.c = 20;
   
   console.log(original); // { a: 1, b: { c: 2 } }
   console.log(copy);     // { a: 10, b: { c: 20 } }