Swallow Copy, Deep Copy, json 복사시 문제점과 대응

# 참조 : https://paperblock.tistory.com/218

 

● Javascript 가 Json / 배열 객체를 다루는 법 .

요약하면 포인터 방식이다 .

1: const original = {name: '철수', age: 12};
2: const clone = original;
3: console.log(clone === original) //true

4: clone.name = '영희';
5: console.log(original.name) //영희

1열 : javascript 는 {} 객체를 할당하고 그 주소를 original 에 담는다.

2열 : clone 에 original 에 담긴 주소를 담는다 . 즉, orignal 과 clone 은 같은 객체를 가르킨다 . call by ref .

 

● Javascript 가 Json / 배열 객체를 다룰 때 특이사항

javascript 에는, 객체를 복사할 때 Object.assign() 이나 Paste객체= {...Copy객체 } ( ES6 Spread Operator )방식을 사용한다.

1: const original = {name: '철수', age: 12};
2: const clone = Object.assign({}, original);
3: clone.name = '영희'

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

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

3: clone.profile.name = '영희';
4: clone.grade = 'B';

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

 

문제는,

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

3: clone.profile.name = '영희';
4: clone.grade = 'B';

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

1열에서 Json 객체안에 Json 객체가 있을 경우 복사가 특이하다. ( 이를 Swallow Copy = 얕은 복사라 한다 )

즉, original 에는 바깥쪽 Json 객체 주소를 가지는데, 문제는 안쪽 Json 객체인 {name:'철수', age:12} 도 별도의 Json 객체로 주소를 가진다 . 즉 profile 은 다시 Json 객체 주소이다.

 

그렇기 때문에 3열에서 name = '영희' 로 바꾸면 original 과 clone 의 name 이 모두 바뀐다.

 

그래서 객체안의 객체까지 "복사" 하는게 Deep Copy 이다.

 

● Deep Copy

과거에는 Deep Copy 를

const clone = JSON.parse(JSON.stringify(original));

와 같이 parse 와 stringfy 직렬화를 사용하였다 .

하지만, 엔진에서 parse 속도 개선하였으나 그래도 느렸고, 심지어 복잡한 구조의 경우 복사에 문제가 발생했다 .

* 복잡한 구조 = Recursive data structures, Built-in types (Date, Map, Set, Date, RegExp, ArrayBuffer...), Functions

 

이를 Application 레벨에서 해결하려고 나온게 underscore와 Lodash.deepclone 함수 이다.

하지만 이젠 엔진레벨에서 모든 브라우저저가 StructuredClone() 을 지원한다.

 

● StructuredClone

사용법은 아래와 같다.

const pasteobject = structuredClone(copyobject)

* 문법 ) structuredClone(value, { transfer })