Copy by Value와 Copy by Reference

자바스크립트에서 데이터를 다루다 보면 Copy by Value(값에 의한 복사)와 Copy by Reference(참조에 의한 복사)라는 개념이 등장합니다. 간단히 말해 이 둘은 데이터가 메모리에 저장되는 방식이 다른데요! 특히나 변수에 저장된 값을 복사하거나 변경할 때 이 개념이 중요한 역할을 하게 됩니다. 이제 두 개념이 무엇인지를 예제를 통해 자세하게 알아볼까요?🙌🏼

🎯 1. Copy by Value(값에 의한 복사)

먼저, Copy by Value는 말 그대로 값을 그대로 복사한다는 뜻이에요! 새로운 변수를 만들 때, 기존 변수가 가지고 있던 값을 단순히 복사해서 새로운 메모리 공간에 할당하는 것입니다. 자바스크립트에서 기본 데이터 타입(Primitive Types)인 string, number, boolean 같은 값들은 Copy by Value를 따릅니다.

📝 예시 코드: Copy by Value

let original = '안녕하세요';
let clone = original;

console.log(original); // '안녕하세요'
console.log(clone); // '안녕하세요'

clone += ' 강아지는 귀엽죠?';
console.log('------');
console.log(original); // '안녕하세요'
console.log(clone); // '안녕하세요 강아지는 귀엽죠?'

• original이라는 변수를 만들고 clone이라는 변수에 그 값을 복사했습니다. 이때, 두 변수는 서로 다른 메모리 공간에 저장됩니다.
• 이후 clone 변수에 새로운 문자열을 더해 변경해도 original은 영향을 받지 않습니다. 이는 두 변수가 서로 독립적인 메모리 공간에 값을 저장하고 있기 때문입니다.

⭐ 중요: Copy by Value의 특징

• 독립적인 메모리 공간에 값을 저장하므로, 한쪽이 변경되어도 다른 쪽에 영향을 주지 않습니다.
• 기본 데이터 타입(Primitive Types)인 string, number, boolean 등이 이에 해당합니다.

🎯 2. Copy by Reference(참조에 의한 복사)

Copy by Reference는 복사하는 것이 아니라 기존 데이터가 저장된 메모리 주소를 참조하는 방식입니다. 즉, 여러 변수가 같은 메모리 공간을 바라보게 됩니다. 자바스크립트에서 객체(Object)와 배열(Array)은 Copy by Reference를 따릅니다.

📝 예시 코드: Copy by Value

let originalObj = {
  name: '강아지',
  type: '말티즈'
};

let cloneObj = originalObj;
console.log(originalObj); // { name: '강아지', type: '말티즈' }
console.log(cloneObj); // { name: '강아지', type: '말티즈' }

originalObj['type'] = '포메라니안';
console.log(originalObj); // { name: '강아지', type: '포메라니안' }
console.log(cloneObj); // { name: '강아지', type: '포메라니안' }

• originalObj를 cloneObj에 복사했지만, 여기서 복사되는 것은 메모리 주소입니다.
• 그래서 originalObj의 type 속성을 바꾸면, cloneObj도 같이 변경됩니다. 두 변수는 같은 메모리 공간을 바라보고 있기 때문입니다.

⭐ 중요: Copy by Reference의 특징

• 같은 메모리 공간을 참조하기 때문에, 한쪽이 변경되면 다른 쪽도 영향을 받습니다. (당연한 이야기죠!)
• 객체(Object)와 배열(Array)이 이에 해당합니다.

🎯 3. Spread Operator는 Copy by Value다!!

Spread Operator(...)를 사용하면 객체나 배열의 값만을 복사할 수 있습니다. 이렇게 하면 새로운 메모리 공간에 복사된 값을 저장하게 됩니다.

📝 예시 코드: Copy by Value

const cloneObj2 = {
  ...cloneObj,
};

console.log(cloneObj2); // { name: '강아지', type: '포메라니안' }
console.log(cloneObj === cloneObj2); // false

• 여기서 ...cloneObj를 통해 객체의 모든 속성을 복사한 새로운 객체를 만들었습니다.
• cloneObj와 cloneObj2는 서로 다른 메모리 공간에 저장되므로, 두 객체는 완전히 독립적입니다.

⭐ 중요: Spread Operator의 특징

• 새로운 메모리 공간에 값을 복사하므로 독립적인 객체나 배열을 만듭니다.
• 이는 Copy by Value로 작동하므로, 원본과 복사본이 서로 영향을 주지 않습니다.

---

📌 결론

Copy by Value와 Copy by Reference의 핵심 차이

1. Copy by Value는 단순히 값을 새로운 메모리 공간에 복사하는 방식으로, 값이 변경되어도 서로 영향을 주지 않습니다.
2. Copy by Reference는 기존 데이터의 메모리 주소를 참조하여 복사하는 방식으로, 변경 사항이 서로 공유됩니다.

🛠 객체를 복사할 때의 주의점

• Spread Operator를 사용하면 객체를 Copy by Value로 복사할 수 있습니다. 이렇게 하면 복사된 객체는 원본과 독립적입니다.
• 그러나, 깊은 객체(객체 안에 객체가 있는 경우)에서는 깊은 복사가 필요할 수 있으며, 이는 JSON.parse(JSON.stringify(obj))와 같은 방법을 사용해야 합니다.

⭐ 중요: 올바른 복사 방식을 선택하는 이유

• 값의 변경이 원본에 영향을 미치지 않도록 하려면 Copy by Value를 사용해야 합니다.
• 객체나 배열을 복사할 때 Copy by Reference를 이해하고 있어야 나중에 데이터 변경할 일이 생겼을 때 에러를 사전에 방지할 수 있답니다..!!