[FE] 📚 자바스크립트 얕은 복사(Shallow Copy) & 깊은 복사(Deep Copy)

 

 

🤗 오늘의 위클리 페이퍼는

자바스크립트에서 얕은 복사(Shallow Copy)와 깊은 복사(Deep Copy)에 대한 토픽입니다.

 

 

📝 JavaScript 에서 객체를 복사할 때 얕은 복사와 깊은 복사는 중요한 개념입니다.

이 두 개념을 입문자도 쉽게 이해할 수 있도록 설명하겠습니다.

 

먼저 자바스크립트 자료형에 대해 알아보겠습니다.

자바스크립트에서 값을 복사할 때, 자료형에 따라 복사하는 값이 달라집니다.

 

• 기본형(Primtive type)은 Numver, 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(Array, Function, Map 등 기본형을 제외한 모든 것)가 있고, 데이터의 내용 변경이 가능합니다. 변수에 참조형을 할당하면 해당 객체의 메모리 주소값이 복사됩니다.

let obj1 = {num: 1};
let obj2 = obj1;

obj1.num = 123

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

 

obj2가 obj1 객체의 메모리 주소값을 복사하기 때문에, obj1의 값이 변경되면 obj2도 동일한

메모리 주소에 있는 값을 가져 변경된 값을 갖게 됩니다.

 

 

기본형의 변수 할당

 

객체의 변수 할당

 

---

 

📗 얕은 복사 (Shallow Copy)

 

얕은 복사는 원본 객체의 프로퍼티들을 새로운 객체에 복사하는 것을 말합니다.

하지만 이때, 복사된 객체의 프로퍼티들은 객체의 프로퍼티들을 참조하게 됩니다.

즉, 내부 객체들은 동일한 객체를 가리키게 됩니다.

👉 객체의 메모리 주소값을 복사 ❗

const original = {
  name: 'John',
  age: 30,
  address: {
    city: 'Seoul',
    country: 'South Korea'
  }
};

// 얕은 복사
const shallowCopy = Object.assign({}, original);

console.log(shallowCopy === original); // false
console.log(shallowCopy.address === original.address); // true

 

위 예시에서 'shallowCopy' 객체는 'original' 객체의 프로퍼티들을 복사했지만,

'address' 프로퍼티는 같은 객체를 참조합니다.

따라서 'shallowCopy.address'와 'original.address'는 동일한 객체를 가리키게 됩니다.

---

 

📙  깊은 복사(Deep Copy)

 

깊은 복사는 원본 객체의 모든 프로퍼티들을 새로운 객체에 복사하는 것입니다.

이 때, 내부 객체들도 모두 새롭게 복사하여 새로운 객체 구조를 만듭니다.

따라서 복사된 객체와 원본 객체는 완전히 독립적인 객체가 됩니다.

 

👉 실제값을 복사❗

const original = {
  name: 'John',
  age: 30,
  address: {
    city: 'Seoul',
    country: 'South Korea'
  }
};

// 깊은 복사
const deepCopy = JSON.parse(JSON.stringify(original));

console.log(deepCopy === original); // false
console.log(deepCopy.address === original.address); // false

 

위 예시에서 'deepCopy' 객체는 'original' 객체의 모든 프로퍼티들을 완전히 새로운 객체로 복사했습니다.

따라서 'deepCopy' 객체와 'original' 객체는 서로 독립적이며, 내부 객체들 역시 새로운 객체를 참조하게 됩니다.

---

 

✅ 결론

 

 

깊은 복사는 JSON.parse(JSON.stringify(obj))를 사용하는 방법이 간단하고 일반적으로 사용됩니다. 하지만 객체의 구조가 복잡하고 함수 등의 특별한 타입을 포함할 경우에는 추가적인 처리가 필요할 수 있습니다. 얕은 복사와 깊은 복사의 개념을 이해하고 적절히 사용하여 객체를 복사하는 것은 JavaScript 프로그래밍에서 중요한 부분입니다.