자바스크립트 참조, 얕은복사, 깊은복사의 차이점

참조

참조형 타입의 객체는 데이터를 직접 보관하고 있는 것이 아니라 데이터가 보관된 메모리 주소를 기억하고 있습니다. 참조형 타입을 다른 변수에 대입하게 되면 복사가 일어나지 않고 참조가 일어나게 됩니다. 참조란 실제 데이터를 복사하는 것이 아니라 데이터가 있는 주솟값을 공유하는 것을 의미합니다. 즉, sports와 sports2 둘 모두 같은 주소를 가리키고 있는 것이며 원본 데이터["soccer", "baseball", "basketball"]를 공유하고 있는 것입니다. 그래서 sports2를 수정하였을 때 sports도 수정이 됩니다.

const sports = ["soccer", "baseball", "basketball"]; // 원본 데이터
const sports2 = sports; // 대입 
sports2[0] = ["tennis"]; // 대입된 변수를 수정 

console.log(sports); 
=> ["tennis", "baseball", "basketball"] // 원본이 수정됨

 

얕은 복사

fixedSports를 수정해도 원본 데이터인 sports는 수정되지 않습니다. 대입을 한 것이 아닌 복사를 한 것이기 때문입니다.

spreadOperator를 이용한 복사 

const sports = ["soccer", "baseball", "basketball"];// 원본 데이터 
const fixedSports = [...sports]; // 복사 fixedSports[0] = "tenis"; // 복사된 변수를 수정

console.log(sports); 
=> ["soccer", "baseball", "basketball"] 
// 원본은 수정되지 않음

 

깊은복사

단, 객체의 level이 더 깊을 경우 spread operator는 맨 바깥 level의 영역만 복사를 하기에 더 깊은 레벨의 데이터는 복사가 되지 않습니다.  모든 level의 데이터를 복사하기 위해서는 깊은 복사(deep copy)를 해야 할 필요가 있습니다.