얕은 복사와 깊은 복사 1분 만에 이해하기

얕은 복사 vs 깊은 복사

• 얕은 복사(shallow copy) : 객체의 참조(주소) 값을 복사하는 것. 1 depth까지만 복사하며, 객체에 중첩되어 있는 객체의 경우 참조 값을 복사한다.

  const obj1 = { a: 1, b: 2 };
  const obj2 = obj1; // 참조에 의한 할당 (같은 데이터 주소)
  
  console.log(obj1 === obj2); // true
  
  obj2.a = 3; // 같은 주소를 참조하고 있어서 obj2의 프로퍼티를 수정하면 obj1의 프로퍼티도 수정된다.
  console.log(obj1.a); // 3

• 깊은 복사(deep copy) : 객체의 실제 값을 복사하는 것. 객체에 중첩된 객체까지 모두 복사한다.
  • spread 연산자를 통한 깊은 복사 (단, 1 depth 까지만 깊은 복사 가능)

    const obj1 = { a: 1, b: 2 };
    const obj2 = { ...obj1 };
    
    obj2.a = 3;
    
    console.log(obj1 === obj2) // false
    console.log(obj1.a) // 1

  • Object.assign() 메서드를 통한 복사 (단, 1 depth 까지만 깊은 복사 가능)

    const obj1 = { a: 1, b: 2 };
    const obj2 = Object.assign({}, obj1);
    
    obj2.a = 3;
    
    console.log(obj1 === obj2); // false
    console.log(obj1.a) // 1

  • 완벽한 깊은 복사 방법
    • JSON.parse() & JSON.stringify() 사용하기

      const obj1 = { a: 1, b: 2, c: {d: 3} };
      // 객체 순환이 아닌 문자열로 변경 후 그것을 다시 원본 객체로 변경하는 방식
      // 문자열은 원시 타입으로 불변성을 가지기 때문에 깊은 복사가 가능하다!
      const obj2 = JSON.parse(JSON.stringify(obj1));
      
      obj2.c = 3;
      
      console.log(obj1 === obj2); // false
      console.log(obj1.c) // {d: 3}

    • Lodash 라이브러리의 cloneDeep 함수 사용하기
    • 재귀적으로 깊은 복사하기

느낀 점

헷갈려하던 얕은 복사와 깊은 복사를 코드 예제를 직접 작성해보면서 다시 상기하게 되었다. 원시 값과 객체의 특성이 다르기 때문에 항상 이를 내부적으로 고려해서 코드를 작성해야겠다고 느꼈다.

참고 자료

• 모던 자바스크립트 Deep Dive
• 얕은 복사(shallow copy) vs 깊은 복사(deep copy)
• 깊은 복사와 얕은 복사에 대한 심도있는 이야기

잘못된 점이나 궁금한 점이 있으시면 댓글로 남겨주시면 감사하겠습니다!