[JS] 웹API : structuredClone함수를 통한 깊은 참조 복사 하는 방법

 

 

 

전역함수인 structuredClone를 통하여 구조화된 복제 알고리즘을 통해 깊은 복제본을 생성한다.

 

기존에는 javascript 값에서 깊은 복사본을 만들기 위해 여러 방법과 라이브러리를 사용했었다.

하지만 이제는 structuredClone라는 웹API를 기본적으로 제공해주면서 그럴 필요없이 간단하게

깊은 복사를 할 수 있게 되었다.

 

 

structuredClone 사용방법

 

 

기본문법

[복사한 값을 넣을 변수] = structuredClone([값을 복사할 변수]);

 

 

샘플코드

obj = { name : '봄봄', age : 18, soul_food : 'chicken' };
// 👉️ {name: '봄봄', age: 18, soul_food: 'chicken'}

newObj = structuredClone(obj);
// 👉️ {name: '봄봄', age: 18, soul_food: 'chicken'}

obj.name = 'New봄봄';
// 👉️ 'New봄봄'

obj
// 👉️ {name: 'New봄봄', age: 18, soul_food: 'chicken'}

newObj
// 👉️ {name: '봄봄', age: 18, soul_food: 'chicken'}

 

 

위의 코드를 보면 structuredClone함수를 통해 깊은 복제를 한 newObj는 기존 obj의 값이 변경이 되도

변경이 되지 않는 것을 확인 할 수 있다.

 

 

MDN structuredClone() 참조

 

 

* 추가내용

 

단 structuredClone함수로는 함수(Method)를 복제할 수 없다. 복제하면 아래와 같은

에러가 떨어진다