[JavaScript] 얕은 복사(shallow copy) vs 깊은 복사(deep copy)

얕은 복사(shallow copy) vs  깊은 복사(deep copy)

! 얕은 복사(shallow copy)란?

 

const obj1 =  {
    name:"홍길동",
    age:20,
}
const obj2 = obj1

console.log(obj1); 
//=>{ name: '홍길동', age: 20 }

console.log(obj2); 
//=>{ name: '홍길동', age: 20 }



console.log(obj1 === obj2);
// => True

• 위 처럼 객체를 직접 대입하는 경우 참조에 의한 할당이 이루어 지므로 둘은 같은 데이터(메모리주소)를 가지고 잇다.
• 이것이 얕은 복사

const obj1 =  {
    name:"홍길동",
    age:20,
}
const obj2 = obj1

obj2.name ="이순신";
console.log(obj1.name);
// => 이순신
console.log(obj2.name);
// => 이순신

• 위 두 객체는 같은 데이터(메모리 주소)를 가지고있다.
• 그래서 obj2의 property를 수정하고, obj1을 출력해도 obj2를 수정한 값과 값이 같다.

깊은 복사(deep copy)란?

얕은 복사 처럼 주소를 복사해서 공유하는 것이 아니라, 아예 새로운 객체를 만들어서 요소(Property)만 복사해서 사용

• 깊은 복사를 하는 방법

1. Spread Operation(전개연산자 사용)

const obj1 =  {
    name:"홍길동",
    age:20,
}

const obj2 = {...obj1}
obj1.name ="이순신";
console.log(obj1.name);
//=> 이순신
console.log(obj2.name);
//=> 홍길동

하지만, 전개 연산자가 전부다 깊은 복사를 해주는것은 아니다.

왜냐하면, 이 깊은 복사는 현재의Depth 이상으로는 깊은 복사를 하지 않기때문이다.

const obj1 =  {
    name:"홍길동",
    age:20,
    pet:{1:"강아지",2:"고양이"}
}

const obj2 = {...obj1}
console.log(obj1)
// =>{ name: '홍길동', age: 20, pet: { '1': '강아지', '2': '고양이' } }
console.log(obj2)
// =>{ name: '홍길동', age: 20, pet: { '1': '강아지', '2': '고양이' } }
obj1.name = "이순신"
obj2.pet[1] = "여우";
console.log(obj1)
// =>{ name: '이순신', age: 20, pet: { '1': '여우', '2': '고양이' } }
console.log(obj2)
// =>{ name: '홍길동', age: 20, pet: { '1': '여우', '2': '고양이' } }

위 처럼 obj1에서는 바깥쪽에 있는것을 바꿧고, obj2에서는 안쪽에있는 것을 바꿧는데 obj1에서 바꾼건 name만 변경이 되었지만 obj2에서바꾼 펫 이름은 obj1과 obj2 둘다 바뀌는것을 볼 수있다.

 

해서 완벽하게 깊은 복사를 하는방법

재귀적으로 깊은 복사를 수행

        깊은 복사를 하려는 형태에 맞게 재귀 함수를 만들어 서 복사를 해야한다.

        사용하는 Object의 Depth가 길어질수록 Time Complexity(시간 복잡도)도 늘어나게 된다.

 

Lodash의 cloneDeep 함수 사용

        자바스크립트의 고차함수 집합 및 함수형 라이브러리이다.

        Lodash의 cloneDeep 함수를 사용하면, 완벽하게 깊은 복사를 할 수 있다.

 

JSON.parse()와 JSON.stringify()함수 사용

        JSON.stringify 함수를 이용해서, Object 전체를 문자열로 변환 후, 다시 JSON.parse 함수를 이용해서 문자열을                   Object 형태로 변환한다. 

        그러면 문자열로 변환하는 순간 참조 값이 끊기기 때문에 새로운 Object로 만들어 사용할 수 있다.