얕은복사와 깊은복사를 이해하기 위해서는 원시값과 객체에 대한 이해가 먼저!
원시값과 객체
원시값
변경 불가능한 불변의 값
String / Number / undefined / Boolean / Symbol / BigInt
예시)
undefined이나 100은 원시값이기 때문에 값 변경이 불가능하다
그래서 num = 100; 으로 값을 재할당하면
기존 메모리 주소 0X000000F2에 있던 값 undefined을 변경하는 것이 아니라
① 새로운 메모리 주소 0X00001234를 확보하여 100이라는 값을 저장하고
② 변수가 가리키던 기존 메모리 주소를 새로운 메모리 주소로 바꿈으로써 변수의 값을 변경하는 것이다
메모리 주소를 바꿔가면서 값을 변경하기 때문에 원시값의 불변성을 유지할 수 있다
객체
원시값과 다르게 변경이 가능한 값
자바스크립트에서는 객체를 생성한 이후에도 프로퍼티를 추가하거나 삭제하는 등의 변경이 가능하다
예시)
변수에 객체를 할당하면
① 그 객체는 다른 메모리 공간에 값으로 담기고
② 변수는 그 객체를 담고 있는 메모리 공간의 주소를 가리킨다
객체가 변경되더라도 변수에 할당 된 (객체 값을 담고 있는) 메모리 주소는 변경되지 않는다
때문에 항상 객체를 참조할 수 있다
원시값과 객체를 할당할때 왜 이렇게 다른걸까?
객체는
① 원시값처럼 크기가 일정하지 않고
② 복사해서 생성하는 비용이 크고
③ 메모리 공간을 많이 차지한다
때문에 원시값처럼 재할당 할때마다 새로운 메모리 주소를 생성하지 않고 기존 객체를 참조한다
(단, 여러개의 변수가 하나의 객체를 참조함으로써 서로 영향을 주는 경우에는 문제가 생길 수 있다)
얕은복사와 깊은복사
얕은복사 shallow copy
- 원본 객체의 참조값(주소 값)을 복사한다
- 참조에 의한 할당이 이루어지므로 같은 메모리 주소를 가진다
- 원본 객체가 수정되는 경우, 복사한 객체도 동일하게 변경되는 변동이 생긴다 (기존 값에 영향 O)
예시) 얕은복사 - 객체
obj와 copy는 동일한 주소값 0X00001234을 참조하고 있다
동일한 주소값을 참조하고 있기 때문에 copy.a값이 변경되면 obj에도 동일하게 적용된다
깊은복사 deep copy
- 원본 객체의 실제 값을 복사한다
- 모든 값을 복사하여 독립적인 새로운 객체를 생성하므로 다른 메모리 주소를 가진다
- 원본 객체와 복사한 객체는 서로에게 영향을 주지 않는다 (기존 값에 영향 X)
- 모든 값을 복사해오기 때문에 얕은복사에 비해 상대적으로 느리고 복잡하다
예시) 깊은복사 - 원시값
copy는 독립적인 메모리 공간을 생성하여 그곳에 값을 복사한다
original과 copy는 둘 다 100 이라는 값을 가지지만 메모리 주소는 다르다
따라서 각 변수에 재할당을 하여도 서로에게 영향을 주지 않는다 => 깊은복사
예시) 깊은복사 - 객체
obj를 스프레드 연산자로 복사 후 copy에 할당하면 독립적인 메모리 공간을 생성하여 각자 다른 메모리 주소값을 참조한다
각자 다른 주소값을 참조하고 있기 때문에 copy.a값이 변경되어도 obj에는 적용되지 않는다
여기저기 많이 찾아보고 이해했다고 생각했는데 막상 정리해보니 또다시 헷갈리고 어렵다..
틀린부분이 있다면 반박 100% 받음 🫡
