[javascript] 객체 복사의 문제점 해결 방안 '얕은복사(Shallow copy)'

 

* 객체 복사의 문제점 해결 방안 > '얕은 복사(Shallow copy)'

🫠  코드를 작성하다가 객체를 복사해 사용할 때, 복사해온 값 변경 시 원본 값이 훼손되는 경험이 꽤나 빈번하다. 
객체를 복사해 오는 방법에는 두 가지가 있는데, 이는 '값 복사'와 '메모리 주소 복사'로 나뉜다. 
그 중 '메모리 주소 복사'를 해올 경우, 원본이 훼손되는 문제가 생겨 해결 방안으로 '얕은 복사(Shallow copy)'에 대해 정리하고자 한다.

 

 

 

  객체를 하나 생성해보자

> 간단한 객체 하나가 콘솔창에 출력된 것을 확인 ✅

 

 

 

---

🫠  객체 복사(메모리 주소)의 문제점 

> 원본 객체인 cake_recipe를 할당해 주는 새로운 변수를 생성 (cake_rec2) 

> 출력 결과를 통해 cake_recipe 값을 그대로 받아온 것을 확인할 수 있음

 

 

 

🫠 cake_rec2의 값을 변경해 보자

> cake_rec2의 'water' 값은 500으로 제대로 변경되었지만, cake_recipe의 'water' 값도 500으로 변경되는 문제가 발생

> 이는 cake_recipe가 사용하는 메모리 주소를 복사해 왔기 때문. 따라서 얕은 복사(Shallow copy)로 값을 복사해 오자!

 

 

 

---

👉🏻 얕은 복사(Shallow copy) 방법 3가지

① for in문 사용

② Object.assign( ) 함수 사용

③ 전개 연산자 (Spread Operator) 사용

 

 

🫠 ① for in문 사용

> for in문을 사용하여 key값을 하나씩 복사하는 방법

👉🏻 output : cake_recipe와 cake_rec2 객체 값이 동일 
✅ 빈 객체 cake_rec2를 생성하고, for in문을 통해 cake_recipe 객체의 key 값을 하나씩 가져와 cake_rec2에 복사해 온다.
❗️ 만약 cake_rec2의 'water' 값을 500으로 변경할 경우?

 

 

✅ 메모리 주소 복사가 아닌, 객체의 값을 직접 가져와 복사했기 때문에 원본인 cake_recipe의 'water'는 200으로 변경되지 않은 것을 확인할 수 있다.

 

 

 

---

🫠 ② Object.assign( ) 함수 사용

> Object의 assign( ) 내부 함수를 이용하여 값을 복사하는 방법

👉🏻 output : cake_recipe와 cake_rec2 객체 값이 동일 
✅ assign(할당하다) 함수는 cake_recipe 즉, 원본 객체 값을 { } 빈 객체에 할당시켜 주는 함수이다. 
❗️ 이 또한 cake_rec2의 'water' 값을 700으로 변경할 경우?

 

 

✅ 똑같이 메모리 주소 복사가 아닌, 객체의 값을 할당해서 넣어주었기 때문에 원본을 훼손하지 않음

 

 

 

---

🫠  ③ 전개 연산자 (Spread Operator) 사용

> 전개 연산자 {...}을 사용하여 값을 복사해 오는 방법

👉🏻 output : cake_recipe와 cake_rec2 객체 값이 동일 
✅ 정말 간단하고 쉽게 사용할 수 있는 전개 연산자는 { } 빈 객체 안에... 과 복사해서 값을 저장하려는 객체를 넣어주면 된다.
✅  최대한 간단하게 작성할 수 있어 javascript 코드에서 가장 많이 쓰이는 값 복사!
❗️ 이 친구도 cake_rec2의 'water' 값을 1000으로 변경할 경우?

 

 

 

✅ 똑같이 메모리 주소 복사가 아닌, 객체의 값을 할당해서 넣어주었기 때문에 원본을 훼손하지 않음

 

 

 

---

❗️❗️ 이렇게 얕은 복사를 통해 객체의 값을 쉽게 복사해 오면 너무 좋겠지만, 얕은 복사에도 문제점은 있다. 

 

👇🏻 아래에서 문제점을 확인해 보자

> cake_recipe 객체 안에 color라는 또 다른 2중 객체를 작성하고, 전개 연산자를 이용하여 cake_rec2에 값을 복사한 예시

✅ cake_rec2에 2중 객체로 들어가 있는 color의 값도 제대로 복사된 것을 확인할 수 있다.
❗️ 하지만 만약 color의 first_floor의 값을 'pink'로 변경해 본다면?

 

 

👉🏻 cake_rec2의 값이 제대로 변경되었지만, cake_recipe의 color 값도 변경되는 문제가 발생한다. 
❗️ 즉, 객체 안에 또 다른 객체로 값이 있을 경우, 얕은 복사를 이용하면 2중 객체는 메모리 주소로 복사되어 오는 문제점이 생긴다.

 

 

🫠 이러한 얕은 복사의 문제점을 해결하기 위해 깊은 복사(Deep copy) 해결 방법이 있는데, 이는 다음 포스팅에서 정리할 계획이다.