[JavaScript] 얕은 복사와 (Shallow Copy) 깊은 복사(Deep Copy)

🖐️시작 전

데이터 타입

자바스크립트의 데이터 타입에는 기본형(Primitive Type)과 참조형(Reference Type)이 있다. 

 

기본형(Primitive Type)

• String, Number, Bigint, Boolean, undefined, symbol, null 
• 메모리 영역에서의 변경이 불가능하나, 재할당이 가능하다. 

let value = "original";
value = "change";

 

• 기본형은 불변성을 가지고 있기 때문에 기존 메모리에 생성된 값이 변경된 것이 아니라 다른 메모리를 가리키기 때문에  값이 바뀌는 것처럼 보이는 것이다. 
• 할당 연산자(=) 를 이용 변수에 값 할당 시, 실제 값이 저장된다. 따라서 복사한 값이 재할당되더라도 원본에는 전혀 영향을 받지 않는다. 

let value = "original";
let copy = value;

 

 

참조형(Reference Type)

• 기본형을 제외한 모든 값은 참조형이다. 
• 대표적인 예로는 객체, 함수, 배열 등이 있다. 
• 변수의 크기가 동적으로 변한다. 

=> 객체 데이터 자체는 별도의 메모리 공간인 heap에 저장되며, 변수에 할당 시에는 데이터에 대한 주소 즉, heap 메모리의 주소값이 저장된다.

• 자바스크립트 엔진은 이 메모리 주소 값을 이용해 변수의 값에 접근한다. 

 

👉 얕은 복사 (Shallow Copy)

• 얕은 복사는 실제 값이 아닌 주소 값을 복사하는 것이다. 
• 아래는 얕은 복사의 예시이다.

fruitstprice의 배열을 copy에 얕은 복사를 한 후에 copy의 값만 변경해주었다. 

let fruitsPrice = {
  apple : "1000",
  mango : "3000",
  orange : "5000",
  melon : "6000",
}

let copy = fruitsPrice;
copy.apple = "5000";
console.log(fruitsPrice);
console.log(copy);

 

출력 결과, 원배열인 fruitsPrice의 배열의 값도 변경이 되었음을 확인하였다. 

 

얕은 복사 시, 해당 값의 주소만을 복사하고, 해당 주소가 가리키는 값을 동일하다. 

따라서 복사한 객체가 변경되면 기존의 객체의 값도 변경된다.

 

 

 

👉 깊은 복사(Deep Copy)

• 깊은 복사란 실제 값을 새로운 메모리 공간에 복사하는 것이다. 
• 원시 타입의 데이터는 할당 연산자를 이용해 값 할당 시에 깊은 복사를 하게 된다. 
• 깊은 복사를 할 시, 원본과 사본은 서로 독립적이기 때문에 얕은 복사와 달리 값 변경에 영향을 받지 않는다.
• 아래는 깊은 복사의 예시이다. 

let fruitsPrice = {
  apple : "1000",
  mango : "3000",
  orange : "5000",
  melon : "6000",
}

let copy = Object.assign({},fruitsPrice);
copy.apple = "5000";
console.log(fruitsPrice);
console.log(copy);

 

출력 결과, 얕은 복사와 달리 copy의 값만 변경됨을 확인할 수 있다 .

 

깊은 복사를 할 경우 서로 다른 주소 값을 가지며, copy는 fruitsPrice와 같은 값을 가진 새로운 객체의 값을 가진 주소를 가리키게 된다.