shallow vs. deep copy

const test = [{ id: 1 }, { id: 2 }, { id: 3 }];
const copiedTest = test.slice(); // shallow copy
const copiedTest2 = JSON.parse(JSON.stringify(test)); // deep copy

test === copiedTest // flase
test === copiedTest2 // flase

test[1] === copiedTest[1] // true(shallow copy) => same pointer! 
test[1] === copiedTest2[1] // false(deep copy)

 

1. shallow copy | test.slice()
   • test 배열의 모든 (객체) 아이템을 얕게 복사하고 그 아이템을 요소로 갖는 새로운 배열을 반환한다.
   • 이 때 '얕은 복사'는 값 자체를 복사하는 것이 아니라, 값을 가리키는 pointer를 공유하는 것을 의미한다. 
   • slice 뿐만 아니라, spread operator도 얕은 복사를 한다. 
2. deep copy | JSON.parse를 이용하면, 값 자체를 하나 하나 복사하는 깊은 복사를 이용할 수 있다. parse 메서드 자체가 깊은 복사에 이용하기 위해 만들어진 것은 아니니, hacky한 방법같다는 생각이 든다. 

 

const extraTest = [{ id: 1, contact: { phone: '010-1234-5678', email: 'jfdhsbj@afvh.com' }}];
const copiedTest3 = JSON.parse(JSON.stringify(extraTest));

extraTest[1].contact === copiedTest3[1].contact // 무엇이 출력될까요?

 

1. true가 출력된다. 
2. 깊은 복사라 하더라도, 한 단계의 중첩까지만 제대로 동작하는 것을 확인할 수 있다. 
3. JSON.parse 대신 structuredClone 메서드를 이용하면, 여러 단계로 중첩 되었을 때에도 깊은 복사가 제대로 동작한다. 

 

+) 참조 | stackoverflow