javaScript-얕은 복사, 깊은 복사

얕은 복사(Shallow Copy) ?

 

 

JavaScript에서 얕은 복사는 주로 Object.assign()이나 전개 연산자(...)를 사용하여 수행된다. 

 

복사본의 속성이 복사본이 만들어진 원본 객체와 같은 참조 (메모리 내의 같은 값을 가리킨다.)를 공유하는 복사이다.

 

따라서 원본 객체의 중첩된 객체가 변경되면 얕은 복사된 객체에도 변경될 수 있다.

 

 

예시를 먼저 보자,

 

 

firstObj라는 객체를 만들고 호출해보자.

 

 

 

잘 나온다.

 

 

 

전개 연산자로 copyObj라는 객체를 만든다.

 

 

 

 

copyObj를 호출하면 firstObj와 똑같은 속성들이 나온다

 

 

 

이번엔 원본 객체의 속성중 c를 변경하고

복사했던 객체의 c 속성을 확인해보면 

 

원본의 속성을 변경했는데 복사본의 속성도 같이 변한 걸 알 수 있다.

 

 

 

 

 

---

 

 

깊은 복사(Deep Copy) ?

 

JavaScript에서 깊은 복사를 수행하려면 주로 재귀적인 방법이나 외부 라이브러리(ex: Lodash)를 사용해야 한다. 

 

깊은 복사를 하면 객체와 객체 내의 모든 하위 객체까지 새로운 복사본을 만들어 원본 객체와는 완전히 독립적인 객체를 얻을 수 있다.

 

 

간단하게 콘솔로 찍어서 예시를 보자.

 

 

ingredientsList 배열을 만들고, 

ingredientsListDeepCopy에다가 깊은 복사를 해보자.

 

 

 

MDN 문서에 따르면

 

직렬화가 가능하다면 JavaScript 객체의 깊은 복사를 만드는 한 가지 방법은, 

JSON.stringify()를 사용하여 객체를 JSON 문자열로 변환한 다음, JSON.parse()로 문자열을 다시 (완전히 새로운) JavaScript 객체로 변환하는 것입니다.

 

 

음...

일단 잘 복사는 된 것 같다.

 

하지만 겉으로 보기에는 얕은 복사와 똑같이 보인다.

 

이번에는 복사본에서 배열을 바꿔보자.

 

반면에 원본 배열은 그대로인 것을 볼 수 있다.

 

 

 

 

깊은 복사는 객체 내의 모든 요소를 재귀적으로 복사하여 새로운 객체를 만들기 때문에

더 많은 계산 리소스를 요구하고, 중첩이 심한 객체일수록 성능에 영향을 미칠 수 있다. 

 

그렇기 때문에 얕은 복사와 깊은 복사를 선택할 때 상황과 성능 요구 사항을 고려해야 한다..!