5.29 Dev.Feedback(Deep Copy, Shallow Copy)

A deep copying means that value of the new variable is disconnected from the original variable

while a shallow copy means that some values are still connected to the original variable.

 

기존 변수의 주소와 계속 연결이 되어있는지의 여부에 따라 깊은 복사와 얕은 복사가 구분된다.

 

그럼 여기서 주소가 계속 연결이 되어있다는 것은 무엇일까?

 

그것은 28일에 게시한 원시자료형 참조자료형의 복사에 대해서 생각해보면 조금 이해가 쉬울 수 있을 것 같다.

원시타입처럼 값 자체가 복사가 되는 것

let a = 200;
let b = a;
console.log(a) // 200
console.log(b) // 200

a = 100;
console.log(a) // 100
console.log(b) // 200

즉 a 에 다시 100을 주게 된다고 해도, b의 값은 기존의 a의 값 자체를 서랍 내부에 저장하고 있기에 200을 가지고 있는 것이다.

기존 변수와의 연결이 끊긴 것이다.

let a = { status: 'tired' };
let b = a;

console.log(a); // { status: 'tired' }
console.log(b); // { status: 'tired' }

a.status = 'energetic'

console.log(a); // { status: 'energetic' }
console.log(b); // { status: 'energetic' }

참조타입처럼 주소가 복사가 되는 것은 얕은 복사가 되는 것이다.

새로운 값을 주게 되면, 그 주소 내부의 값이 변경되는 것이고, 값 자체를 불러주는 것이 아닌 주소를 불러오기에

기존 변수와의 연결이 끊어지지 않은 상태로 기존에 준 변수의 값에도 영향을 주게 되는 것을 볼 수 있다.

 

출처 : https://www.geeksforgeeks.org/difference-between-shallow-and-deep-copy-of-a-class/

얕은 복사와 깊은 복사의 차이점을 명확히 드러내주는 이미지.

 

Array의 메소드가 적용이 됐을 때, 기존 배열이 변경이 되는지 안되는지 여부를 확인할 수 있는 사이트

array메소드가 적용될 때 기존 배열 변경여부만 확인하는 것이고, 여기서는 shallow copy와 deep copy를 체크하는 것이 아닌 듯 하다.

https://doesitmutate.xyz/

 

객체의 깊은 복사를 하기 위해 쓰는 메소드들

Object.assign()

...obj // 스프레드 연산자

 

 JSON.parse(), JSON.stringify() depth를 극복하고 깊은 복사를 하는 메소드들이지만, 성능이슈가 크다고 한다.

 

 

개념을 정리하긴 했지만, 사실 아직 완벽한 이해는 되지 않은 상태이다.

조금 더 개념을 명확하게 이해하기 위해 더 찾아보고 실험을 해야겠다.

 

자 충격으로 인해 업데이트 한다.

메소드가 적용되면 배열 자체는 깊은 복사로 가져오지만, 그 복사한 배열 자체에 변경을 주면, 기존의 배열에 영향을 주게 된다.

지금까지 concat, slice, spread와 같은 메소드는 얕은 복사가 맞았다. 6/21일 다시 수정

 

배열을 메소드로 적용을 하고, 그 이후에 배열에 변경을 주거나 했을 때

shallow copy와 deep copy의 차이점이 정확히 드러나는 것을 확인할 수 있다.

arr2에 새로운 값을 주었을 때에는 기존 배열에 변경이 보이는 것을 볼 수 있다.

arr[0][1] 역시 5로 변경되어있는 것을 볼 수 있다.

아래 코드와 같은 경우에 arr2에 push를 하게 되면, arr2는 변경이 되지만, arr 자체는 변경이 되지 않는 것을 볼 수 있다.

기존 배열에 영향을 주지 않는다 ===  깊은 복사 === 기존 주소와의 연결이 끊겼다.