[JS] 깊은복사 vs 얕은복사

📌 자바스크립트 원시값과 참조값

	원시값	참조값
특징	데이터 복사가 일어날 때 메모리 공간을 새로 확보하여 독립적인 값을 저장	메모리에 직접 접근이 아닌 메모리의 위치(주소)에 대한 간접적인 참조를 통해 메모리에 접근
mutability	immutable	mutable
예시	string number bigint boolean undefined symbol	그 외(array, object, function..)

 

 

📌 예시

원시값 vs 참조값

- myArray의 데이처 자체는 별도의 메모리 공간(Heap)에 저장되며, 변수에 할당 시 데이터에 대한 주소(힙 메모리 주소 값)이 저장되기 때문에 자바스크립트 엔진이 변수가 가지고있는 메모리 주소를 이용해서 변수의 값에 접근

- 변수의 복사나 수정 시 참조 여부를 잘 고려해야함

 

 

📌 얕은복사 VS 깊은복사

얕은복사

- 객체를 복사할 때 원래값과 복사된 값이 같은 참조를 가리키고 있음.

- ex. 참조값

const a = {number: 1};
let b = a;

b.number = 2

console.log(a); // {number: 2}
console.log(b); // {number: 2}

- 방법 : Object.assign(), 전개연산자(...)

 

 

 

깊은복사

- 값을 복사할 때 복사된 값을 다른 메모리에 할당하기 때문에 원래의 값과 복사된 값이 서로 영향을 미치지 않음

- ex. 원시값

const a = 1;
let b = a;

b = 2

console.log(a); //1
console.log(b); //2

- 방법 : 재귀함수, JSON.stringfy(), lodash라이브러리

 

 

 

 

참고

https://velog.io/@nomadhash/Java-Script-%EA%B9%8A%EC%9D%80-%EB%B3%B5%EC%82%AC%EC%99%80-%EC%96%95%EC%9D%80-%EB%B3%B5%EC%82%AC