자바스크립트를 배우게 전엔 copy의 뜻 그대로 복사가 전체다 복사가 된다는 뜻으로만 알고 있었는데 막상 이 것을 공부해보니 얇은 복사와 깊은 복사에는 차이가 있고 적용을 제대로 하지 못했다가 막상 그 변수에 할당하는 값이 잘못 들어갈 수도 있겠구나..! 라는 생각이 들었습니다.이제부터 그 개념들에 대해 알아보겠습니다.
원시값은 변경 불가능한 값인데 원시 값을 갖는 변수의 값을 변경하려면 재할당을 통해 메모리에 원시 값을 새롭게 생성해야 합니다.하지만 객체는 변경 가능한 값이므로 메모리에 저장된 객체를 직접 수정할 수 있습니다.이때 객체를 할당한 변수에 재할당을 하지 않았으므로 객체를 할당한 변수의 참조 값은 변경되지 않습니다.
객체를 변경할 때마다 원시 값처럼 이전 값을 복사해서 새롭게 생성한다면 명확하고 신뢰성이 확보되겠지만 객체는 크기가 매우 클 수도 있고, 원시 값처럼 크기가 일정하지도 않으면, 프로퍼티 값이 객체일 수도 있어서 복사해서 생성하는 비용이 많이 듭니다. 다시 말해 메모리의 효율적 소비가 어렵고 성능이 나빠진다고 볼수 있습니다.
따라서 메모리를 효율적으로 사용하기 위해, 그리고 객체를 복사해 생성하는 비용을 절약하여 성능을 향상시키기 위해 객체는 변경 가능한 값으로 설계되어 있는데 여기서 깊은 복사와 얇은 복사가 적용된다고 볼수 있습니다.
얇은 복사(shallow copy) 란?
얕은 복사는 아주 최소한만 복사를 한다. 값을 복사한다 하더라도, 인스턴스가 메모리에 새로 생성되지 않는다. 값 자체를 복사하는 것이 아니라 주소값을 복사하여 같은 메모리를 가리키기 때문이다.새로운 인스턴스를 생성하지 않기 때문에 깊은 복사보다 상대적으로 빠르다. reference type을 복사하는 경우 얕은 복사가 일어난다.
let arr = [0, 1, 2];
let newArr = arr;
newArr[0] = "hi"
console.log(arr) // ["hi", 1, 2]
console.log(newArr) // ["hi", 1, 2]위 결과 newArr과 arr의 각 배열의 값이 동일한 메모리 주소에 저장되어있는것을 볼수 있다.
깊은 복사(Deep copy) 란?
원시값을 복사할 때 그 값은 또 다른 독립적인 메모리 공간에 할당하기 때문에, 복사를 하고 값을 수정해도 기존 원시값을 저장한 변수에는 영향을 끼치지 않습니다. 이처럼 실제 값을 복사하는 것을 깊은 복사라고 합니다. 하지만 이것은 자료형을 깊은 복사한 것입니다.
const a = 'a';
let b = 'b';
b = 'c';
console.log(a); // 'a';
console.log(b); // 'c';
// 기존 값에 영향을 끼치지 않는다.참고자료😍
https://bbangson.tistory.com/78
책:모던 자바스크립트 Deep Dive:자바스크립트의 기본 개념과 동작원리
