배열,객체를 공부하면서 얕은 복사와 깊은 복사의 개념이 헷갈려서 정리해보기.
얕은 복사(Shallow Copy)는
"얕은"이라는 표현은 복사의 깊이가 얕다는 의미입니다. 최상위 레벨의 속성만을 복사하고, 내부 객체는 참조(주소)를 공유하기 때문에 내부 객체의 변경이 영향을 미치는 특성을 강조합니다.
깊은 복사(Deep Copy)는
"깊은"이라는 표현은 복사의 깊이가 깊다는 의미입니다. 최상위 레벨부터 내부 객체, 중첩된 객체의 모든 수준의 속성을 재귀적으로 복사하여 완전한 독립성을 가진 복사본을 만듭니다.
사전 지식
자바스크립트에서 얕은 복사는 내부 객체의 참조를 복사하고 깊은 복사는 내부 객체의 값을 복사합니다.
기본적으로 자바스크립트에서 객체는 참조 타입이다.
그리고 자바스크립트에서 배열은 사실상 객체로 만들어졌다.
이말을 쉽게 이해하려면 불변 키워드 const 키워드를 사용해서
배열이나 객체를 만들었을때 내부 값이 수정이 불가해야 할 것 같은데 수정이 된다
const obj = { a :2 }
obj.a =3
console.log(obj)
{a: 3}이처럼 참조 타입인 배열이나 객체에선 주소값을 가르키는 형태이다
예제를 보면서 이해하기
얕은 복사 예제
const array1 = [3, 1, 4, 5, 2];
const array2 = array1;
array2.push(6)
console.log(array1, array2);
instrument.ts:113 (6) [3, 1, 4, 5, 2, 6] (6) [3, 1, 4, 5, 2, 6]array2는 array1의 배열객체를 참조하였기 때문에
array2는 실제 array1의 배열객체의 주소값을 바라보고 있다
array2에서 push(6) 메소드를 이용해 값을 추가하였지만
array1할당된 배열객체와 가르키는 주소가 동일하여 array1에도 같이 추가됨
깊은 복사 예제
const array1 = [3, 1, 4, 5, 2];
const array2 = [...array1];
array2.push(6)
console.log(array1, array2);
// (5) [3, 1, 4, 5, 2] (6) [3, 1, 4, 5, 2, 6]
array2에 [...array1] 스프레이드 문법으로 값을 꺼내와서 할당해 주었다
이말은 곧 array2 = [] 새로운 배열을 할당하고 그 뒤에 ...array1 스프레이드 문법을 통해
array1가 가르키는 배열의 할당 되있던 원시데이타값이 들어갔다
array2는 새로운 배열이 할당되었기 때문에 array1과 같은 주소값이 아니라
값 추가를 해도 array1는 변하지 않는다
