javascript 얕은 복사 != 얕은 복사

자바스크립트 딥다이브 책을 읽다가 흥미로운 점을 찾아 정리한다.

 

일단 C에서 얕은 복사는 그냥 포인터(메모리 주소)를 넘겨주는 것이다.

때문에 js에서도 얕은 복사란 아래를 의미하는 줄 알았다.

      

      

      

    
    

      <javascript />
    
let original = { a: 1, b: { c: 2 } };
let shallowCopy = original;

shallowCopy.a = 3;
console.log(original.a); // 3

 

하지만 책에서 얕은 복사란 아래를 의미한다.

      

      

      

    
    

      <javascript />
    
let original = { a: 1, b: { c: 2 } };
let shallowCopy = { ...original };

shallowCopy.a = 3;
shallowCopy.b.c = 4;

console.log(original);  // { a: 1, b: { c: 4 } }
console.log(shallowCopy);  // { a: 3, b: { c: 4 } }

 

이렇게 1 depth까지만 깊은 복사 하는 걸 얕은 복사라 정의하더라. (모던 자바스크립트 딥다이브 150p)

모던 리액트 딥다이브에서도 react 내부 구현 함수인 shallow copy 또한 이렇게 동작한다고 적혀있다.

이는 리액트 재조정 과정에서 오버헤드를 줄이기 위해 합리적인 방법이고 그저 함수 구현체의 이름이니 납득했다만

 

얕은 복사, 깊은 복사같이 중요한 개념에 혼동이 올 수 있어서 언어 딥다이브 책에서의 설명으로썬 별로 좋지 않은 것 같다.

js, react 전용 얕은 복사 : 1 depth까지만 깊은 복사, 나머진 얕은 복사

라고만 정리해 두는 게 좋지 않았을까?

 

혹시 헷갈린다면 call by value, call by reference 관련지어 알고 있는 그 얕은 복사 깊은 복사가 맞다 헷갈리지 마시길

object에서 프로퍼티로 object를 만났을 때 그 부분부터는 call by reference라 생각하면 된다.

 

++) 최하단 depth까지 죄다 깊은복사 해주고 싶으면 재귀 타서 전부 스프레드 연산자 사용하면 된다.

이전에 useReducer 만들 때 사용했던 deepcopy 함수 첨부한다.

      

      

      

    
    

      <javascript />
    
function deepCopy(obj) {
  if (Array.isArray(obj)) {
    return obj.map((item) => deepCopy(item));
  } else if (isObject(obj)) {
    return Object.keys(obj).reduce((acc, key) => {
      acc[key] = deepCopy(obj[key]);
      return acc;
    }, {});
  } else {
    return obj;
  }
}
function isObject(obj) {
  return obj !== null && typeof obj === "object";
}
출처: https://donghyk2.tistory.com/148 [그럴듯한 개발 블로그:티스토리]