[JS] 얕은 복사, 깊은 복사

자바스크립트 자료형

자바스크립트에서 값을 복사할 때, 자료형에 따라 복사하는 값이 달라진다.

기본형(Primitive type)

기본형에는 Number, String, Boolean, Null, Undefined, Symbol이 있고, 데이터 변경이 불가(immutable)하다.
변수에 기본형을 할당하면 새로운 메모리 공간에 독립적인 실제값이 복사된다.

let x = 1;
let y = x;

x = 123

console.log(x) // 123을 출력
console.log(y) // 1을 출력 (y에 할당되었던 1이 변경되지 않음)

- 참조형(Reference type)

참조형에는Object(Array, Function, Map 등 기본형을 제외한 모든 것)가 있고, 데이터의 내용 변경이 가능(mutable)하다. 변수에 참조형을 할당하면 해당 객체의 메모리 주소값이 복사된다.

    let obj1 = {num: 1};
    let obj2 = obj1;
    
    obj1.num = 123
    
    console.log(obj1) // {num: 123}을 출력
    console.log(obj2) // {num: 123}을 출력 (obj2에 할당되었던 {num: 1}의 내용이 obj1을 따라 변경)
    

obj2 가 obj1 객체의 메모리 주소값을 복사하기 때문에, obj1 의 값이 변경되면 obj2 도 동일한 메모리 주소에 있는 값을 가져 변경된 값을 갖게 된다.

얕은 복사와 깊은 복사

실제 값을 복사하는 것을 깊은 복사, 객체의 메모리 주소값을 복사하는 것을 얕은 복사라고 한다.

경우에 따라 참조형의 깊은 복사가 필요할 때가 있는데, 깊은 복사가 된 참조형은 객체 안에 객체가 있을 경우에도 원본과의 참조가 완전히 끊어지게 된다.

참조형의 깊은 복사

크게 세 가지 방법을 고려해 볼 수 있습니다.

• JSON.parse(JSON.stringify(obj)) JSON.stringify() 는 객체를 json 문자열로 변환하는데 이 과정에서 원본 객체와의 참조가 모두 끊어지고, 객체를 json 문자열로 변환 후, JSON.parse() 를 이용해 다시 원래 객체로 만들어 준다

  • 가장 간편하다는 장점
  • function이 있는 경우 undefined 처리한다는 단점, 다른 방법에 비해 느리다는 단점이 있다.

• 커스텀 재귀 함수를 활용한 복사

  • 객체의 함수도 제대로 표현할 수 있다.
  • 복잡하다는 단점이 있다.

• Lodash와 같은 외부 라이브러리 활용

  • 외부 라이브러리 사용에 제약이 없다면 가장 효과적인 선택지가 될 수 있다.

  기본형의 변수 할당
  

  얕은 복사, 깊은 복사
  

객체의 변수 할당