Shallow Copy & Deep Copy

Shallow Copy & Deep Copy

Shallow Copy 얕은 복사?
Deep Copy 깊은 복사?

똑같이 복사하는 의미인데 무엇이 다른 걸까 한번 알아보자

얕은 복사(shallow copy)란?

얕은 복사란 객체를 복사할 때 기존 값과 복사된 값이 같은 참조를 가리키고 있는 것을 말합니다.
객체 안에 객체가 있을 경우 한 개의 객체라도 기존 변수의 객체를 참조하고 있다면 이를 얕은 복사라고 합니다.

간단한 코드 예제를 보자

const obj1 = {
 	copy1 : "copy1",
  	copy2 : "copy2"
}
const obj2 = obj1;

console.log( obj1 === obj2 ) 	// true

위의 예시처럼 객체를 직접 대입하는 경우 참조에 의한 할당이 이루어지므로 둘은 같은 데이터(주소)를 가지고 있다.
그렇다면 obj2의 값을 바꿔보자

const obj1 = {
 	copy1 : "copy1",
  	copy2 : "copy2"
}
const obj2 = obj1;
obj2.copy1 = "shallow copy";
console.log( obj1.copy1 ); // "shallow copy"

obj1과 obj2는 얕은 복사로 복사를 하여 현재 같은 데이터(주소)를 가지고 있기때문에
obj2의 값을 변경했어도 같은 주소인 obj1의 값도 변경된 것을 확인 할 수 있다
그렇다면 원본 데이터는 변경하고 싶지 않을때에는 어떻게 복사를 해야할까?
바로 깊은 복사를 사용하면 된다

깊은 복사(deep copy)란?

객체를 직접 대입하여 복사 시 얕은 복사가 적용 되었다
그럼 객체를 직접 대입하지 않고 복사를 진행해보자

const obj1 = {
 	copy1 : "copy1",
  	copy2 : "copy2"
}
const obj2 = {...obj1};

obj2.copy1 = "deep copy";

console.log( obj1 === obj2 ) // false
console.log( obj1.copy1 ) 	 // 'copy1'

스프레드 연산자를 통해 객체를 직접 대입하지 않고 한꺼풀 벗겨내어 대입하였더니
같은 주소를 참조하지 않는 것을 확인 할 수 있고
obj2의 값을 변경하여도 obj1의 값은 변경되지 않은 것을 확인 할 수 있다
이것을 깊은 복사라고 한다!

하지만 객체 안에 property로 객체가 들어있다면
1 depth까지만 깊은 복사가 진행되고
2 depth부터는 다시 얕은 복사가 진행되는 점을 주의하자

참조

https://hanamon.kr/javascript-shallow-copy-deep-copy/