22.07.21. StructuredClone

홍왕열·2022년 7월 21일
0
post-thumbnail

StructuredClone

보통 객체에서 얕은 복사를 할 때는 spread 연산자를 많이 사용한다.

const original = {name: '철수', age: 12};
const clone = { ...original};
clone.name = '영희'

console.log(original) // {name: '철수', age: 12}
console.log(clone); // {name: '영희', age: 12}

하지만 이 경우에 안에 객체나 배열이 또 있다면 문제가 될 수 있다.

const original = {profile: {name:'철수', age:12}, grade: 'A'};
const clone = { ...original };

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

console.log(original) // {profile: {name: '영희', age: 12}, grade: 'A'}
console.log(clone); // {profile: {name: '영희', age: 12}, grade: 'B'}

위에서 grade 프로퍼티는 정상적으로 clone 부분만 변경되었지만, profile의 name 부분은 원본이 변경된 것을 알 수 있다.
이는 clone의 내부 객체인 profile은 original의 profile과 동일한 주소를 참조하고 있기 때문이다.
따라서 clone의 내부 객체인 profile의 프로퍼티를 변경하는 경우, 원본에서도 변경이 발생한다.

이런 식의 복잡한 구조에서는 싶은 복사를 사용하여야 한다.

다양한 라이브러리들도 있고 하지만 새롭게 나온 StructuredClone의 사용법을 알고자 한다.

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 (한국 표준시)}}

유용하게 사용할 수 있을 것 같으니 잘 알아두자.!!

아래 블로그에서 많이 따왔다.

https://paperblock.tistory.com/218

profile
코딩 일기장

0개의 댓글