[JavaScript] structuredClone() - 객체 "깊은" 복사를 도와주는 메서드

javascript 개발을 진행하게 되면 객체를 복사해서 사용하는 경우가 빈번하게 발생하는데, 방법에 따라 흔히들 알고 있는 얕은 복사(Shallow Copy)와 깊은 복사(Deep Copy)가 존재한다.

 

이 게시글에서는 깊은 복사를 도와주는 메서드인 structuredClone()에 대해 알아보고자 한다.

 

▷ 구문

structuredClone(value)
structuredClone(value, transferables)

value: 복사할 대상인 원본 객체이다. 이는 구조화된 복제가 가능한 모든 유형을 포함한다.

transferables: An array of transferable objects in value that will be moved rather than cloned to the returned object. (반환된 객체에 복제되지 않고 이동되는 전송 가능한 객체의 배열이다.)

 

이렇게 구문에 대해 얼추 알아봤는데, transferables부분에 대해서는 아직 자세히는 모르겠다.

궁금하다면 하단에 있는 공식 문서를 확인해보길 바란다.

---

예제 1) structuredClone  기본 사용법

const original = {
  blog: { name: "나만의 기록들", address: "mine-it-record" },
  name: "HANS",
  since: new Date("2019-01-01"),
};

const clone = structuredClone(original);

clone.blog.name = "나만의 블로그";
clone.name = "NAMS";

console.log(original);
// {blog : {name: '나만의 기록들', address: 'mine-it-record'}
// name : "HANS"
// since : Tue Jan 01 2019 09:00:00 GMT+0900 (한국 표준시) {}}

console.log(clone);
// {blog : {name: '나만의 블로그', address: 'mine-it-record'}
// name : "NAMS"
// since : Tue Jan 01 2019 09:00:00 GMT+0900 (한국 표준시) {}}

만약 얕은 복사를 했다면 original안에 있는 name 프로퍼티는 각자의 고유한 값을 가지고 있겠지만, 그 안에 있는 blog 프로퍼티 같은 경우에는 같은 주소값을 가지고 있기 때문에 clone이 변하면 원본인 original의 blog 프로퍼티 값 역시 변하게 된다.

 

그렇지만 structuredClone을 사용하여 깊은 복사를 하게되면 위 예제처럼 blog 프로퍼티의 속성 값이 각자 고유의 값을 간직하고 있는 것을 확인할 수 있다.

---

https://developer.mozilla.org/en-US/docs/Web/API/structuredClone

structuredClone() - Web APIs | MDN