Swallow Copy, Deep Copy, json 복사시 문제점과 대응
JavaScript, ECMAScript# 참조 : 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 })'JavaScript, ECMAScript' 카테고리의 다른 글
| Indexed DB (0) | 2022.08.03 |
|---|---|
| 디버깅.Debugging.VSC.VisualStudioCode.연동 (0) | 2022.07.28 |
| Callback, Promise, Async/Await (0) | 2022.04.04 |
| import, export (0) | 2021.09.28 |
| CORS.ajax.fetch.어떻게 해도 CORS 가 발생할 경우 (0) | 2021.08.31 |