[javascript] structuredClone()-새로운 객체 복사 방법

structuredClone()은 구조화된 복제 알고리즘 을 사용하여 주어진 값의 깊은 복제본 을 생성합니다 .

 

개발을 진행하며 깊은 복사를 진행할 경우 JSON 메서드, lodash의 deepclone 함수, deepCopy를 사용하였지만,

WEB API에 structuredClone()를 이용하면 된다.

 

[deepCopy 함수]

      

      

      

    
    

      <javascript />
    
function deepCopy(obj) {
    const clone = {}
    for (var key in obj) {
        if (typeof obj[key] == 'object' && obj[key] != null) {
            clone[key] = deepCopy(obj[key])
        } else {
            clone[key] = obj[key]
        }
    }
    return clone
}

 

[structuredClone 구문]

      

      

      

    
    

      <javascript />
    
structuredClone(value)
structuredClone(value, options)

 

Parameter	Description
value	복사할 원본 객체
transfer (Option)	An array of transferable objects in value that will be moved rather than cloned to the returned object.

[적용]

      

      

      

    
    

      <javascript />
    
const original = {
  profile: {name:'철수', age:12}, 
  grade: 'A', 
  date: new Date('2022-01-01')
};

const clone = structuredClone(original);

clone.profile.name = '영희';
clone.grade = 'B';

console.log(original) 
// {profile: {name: '철수', age: 12}, 
// grade: 'A', 
// date: Sat Jan 01 2022 09:00:00 GMT+0900 (한국 표준시)}}

console.log(clone); 
// {profile: {name: '영희', age: 12}, 
// grade: 'B', 
// date: Sat Jan 01 2022 09:00:00 GMT+0900 (한국 표준시)}}

 

JSON타입에서 지원하지 않는 Date타입도 복사가 가능하다.

structuredClone함수로는 함수(Method)를 복제할 수 없다.

https://paperblock.tistory.com/218

JavaScript의 새로운 객체 복사 방법 - Structured Clone