• 자바스크립트에서 객체를 deep copy 할 때는 spread 연산자나 Object.assign을 활용해 값을 복제할 수 있다.

const object = {
	hello: "javascipt",
}

const deepCopyObjectOne = {...object};
const deepCopyObjectTwo = Object.assign(object);

• 그런데 객체 내부에 객체가 중첩되어있는 경우, 값으로 해당 객체의 주소만을 가져오기 때문에 deep copy가 제대로 이루어지지 않는다.
• 이를 해결하기 위해서는 JSON으로 데이터를 변환했다 다시 받아와주거나, 별도로 객체를 deep copy해주는 함수를 작성하거나, 라이브러리를 사용해주곤 했다.
• 하지만 JSON으로 객체를 변환할경우 성능에 좋지 않은 영향을 줄 수 있으며, json 데이터 이외의 값들이 제대로 복사가 되지 않는다는 문제가 있다.
• 마찬가지로 함수를 작성할 경우에도 직접 작성하는 함수의 경우 신뢰성을 보장할 수 없으며, 라이브러리를 설치하는 경우에도 자바스크립트 코드의 양을 늘려버린다는 단점을 가지고 있다.

structuredClone()

• 이러한 문제를 브라우저 차원에서 해결하기 위해 structuredClone() 메서드가 등장하였다.
• 이 메서드는 structured clone 알고리즘을 사용하여 주어진 값의 깊은 복사를 생성한다.

const mushrooms1 = {
  amanita: ["muscaria", "virosa"],
};

const mushrooms2 = structuredClone(mushrooms1);

mushrooms2.amanita.push("pantherina");
mushrooms1.amanita.pop();

console.log(mushrooms2.amanita); // ["muscaria", "virosa", "pantherina"]
console.log(mushrooms1.amanita); // ["muscaria"]

• json을 사용한 복제와 다르게 정규식, Blob, File등의 복제 역시 제대로 지원하며, 성능상의 이점도 얻을 수 있다.
• 또한 브라우저, node.js에서 자체적으로 지원을 하기 때문에 불필요한 라이브러리 사용도 줄일 수 없다.
• 단, 일부 속성의 경우는 복제가 되지 않음에 주의해야 한다.
  • Error, 함수, DOM node가 포함된 객체를 복제시도할 경우 DATA_CLONE_ERR 에러 발생
  • RegExp 객체의 liastIndex 필드, Property descriptor, getter, setter는 복제되지 않음
  • 프로토타입 체인은 거치지 않고 복제되지 않음

출처:
https://developer.mozilla.org/ko/docs/Web/API/structuredClone