[JavaScript] 자바스크립트 얕은 복사(Shallow Copy)와 깊은 복사(Deep Copy)

자바스크립트에서 얕은 복사(Shallow Copy)와 깊은 복사(Deep Copy)는 객체나 배열을 복사하는 두 가지 기본적인 방법을 뜻한다. 얕은 복사는 객체의 참조값(주소 값)을 복사하고, 깊은 복사는 객체의 실제 값을 복사한다.

얕은 복사 (Shllow copy)

얕은 복사란 객체를 복사할 때 기존 값과 복사된 값이 같은 참조를 가리키고 있는 것을 말한다.
객체 안에 객체가 있을 경우 한 개의 객체라도 기존 변수의 객체를 참조하고 있다면 이를 얕은 복사라고 한다.
=> 객체 자체는 다른 새 객체지만, 객체 내부의 값이 클론 한 객체 값의 참조값을 복사하는 경우

const Food = {
  foodName : "hotdog",
  stock : 23,
}
conset Fruit = Food;
Fruit.foodname ="banana";
//같은 객체를 참조하고 있음
console.log(Food); // {foodName : "hotdog", stock : 23}
console.log(Fruit); // {foodName : "hotdog", stock : 23}

깊은 복사(Deep Copy)

깊은 복사된 객체는 객체 안에 객체가 있을 경우에도 원본과의 참조가 완전히 끊어진 객체를 말한다.
얕은 복사처럼 참조 주소값이 복사 되는 것이 아닌, 값만 복사되는 것이다.

const Food = {
  foodName : "hotdog",
  stock : 23,
}
conset Fruit = {...Food};
Fruit.foodname ="banana";
//전개연산자를 이용한 객체 복사
console.log(Food); // {foodName : "hotdog", stock : 23}
console.log(Fruit); // {foodName : "banana", stock : 23}

여기서 값을 복사할 때, 자바스크립트의 자료형에 따라 복사하는 값이 달라지게 된다.

자바스크립트 자료형과 복사 방식

• 기본형(Primitive type): 깊은 복사:Number, String, Boolean, Null, Undefined, Symbol이 있고, 데이터 변경이 불가능하다. 원시값은 값을 복사할 때 복사된 값을 다른 메모리에 할당하기 때문에 원래의 값과 복사된 값이 서로에게 영향을 미치지 않는다.

      let x = 1;
   let y = x;
  
    x = 123
  
    console.log(x) // 123을 출력
    console.log(y) // 1을 출력 (y에 할당되었던 1이 변경되지 않음)

• 참조형(Reference type): 얕은 복사: Object가 있고, 데이터의 내용 변경이 가능하며, 변수에 참조형을 할당하면 해당 객체의 메모리 주소값이 복사된다. 참조값은 변수가 객체의 주소를 가르키는 값이기 때문에 참조값(주소)을 복사하여 값을 가리킨다. 따라서 한쪽의 값을 변경할 경우, 같은 참조값이기 때문에 양쪽 값이 모두 변경된다.

       let obj1 = {num: 1};
    let obj2 = obj1;
  
    obj1.num = 123
  
    console.log(obj1) // {num: 123}을 출력
    console.log(obj2) // {num: 123}을 출력 (obj2에 할당되었던 {num: 1}의 내용이 obj1을 따라 변경)

  • 얕은 복사를 한 변수를 수정한다면, 원본 객체까지 변경될 수 있으므로 주의하여 사용해야 한다
  기본 변수의 할당객체 변수의 할당