[JavaScript] 섀시 복사 및 깊이 이해

개시하다

Safari15.4가 나왔기 때문에 모든 현대 브라우저는 structuredClone()를 사용하여 깊이 있게 복제할 수 있다.
회사 내에서도 화제가 됐지만, 최초의 심도 있는 복제는 무엇일까...?그래서 간단한 조사 총결산.
또 원판 복사본도 관련된다.

JavaScript의 데이터 유형

섀시 복사·딥 복사를 말하기 전에 자바스크립트에 대한 데이터를 먼저 말하세요.
JavaScript는 원본형과 객체형 두 종류로 나뉜다.

원래 유형

진위값이나 수치 등 기본값의 유형을 가리킨다.
원시 유형은 한 번 제작하면 수치 자체를 바꿀 수 없는 동음판 특성을 가지고 있다.
원래 유형

문자열 스트링

숫자 Number

진위 Boolean

undefined

null

기호 Symbol

대상

원본 형식이 아닌 대상이나 그룹 등을 대상이라고 부른다.
제작 후에도 수치를 변경할 수 있기 때문에 정음판의 특성을 가지고 있다.
객체는 참조를 통해 저장되거나 복사됩니다.
객체의 변수를 지정하면 값이 아닌 객체의 스토리지 주소가 저장됩니다.
객체 및 배열과 같은 참조 유형의 데이터만 섀시 복제 및 깊이 복제 필요
대상

원시 유형 이외의 데이터

객체

정렬

정규 표현식

Date 등

원본 유형 복사

원본 유형의 복사본은 생성되는 동안 메모리에 새 값을 분배합니다.
모든 메모리에 값이 있기 때문에 a를 b에 대입한 후 a의 값 b를 변경해도 바뀌지 않습니다.
원래 유형은 값으로 복사됩니다.

let a = 100;
let b = a;
a = 200;

console.log(a); // 200
console.log(b); // 100

객체 복사

객체의 복사본은 원래 유형과 달리 새 객체에 대한 참조 전송을 작성하지 않습니다.
변수person와 newPerson는 메모리의 동일한 데이터를 확인합니다.나는 같은 데이터에 별명을 붙인 것을 이해했다.

const person = {name: "Tom"};
const newPerson = user;
person.name = "Bob";
console.log(person); // {name: "Bob"}
console.log(newPerson); // {name: "Bob"}

참조된 데이터가 같기 때문에 값을 변경한 후에 값이 각각 변한다.

다만 실제 대상의 값이 바뀌면 곤란한 경우가 많다.
따라서 원판 복사와 심판 복사가 필요하다.

원판 복사, 심판 복사

복사된 소스와 복사된 목적지의 참조 깊이를 기준으로 하는 호칭입니다.

슬라이드 사본

추적기 복사(shallow copy)는 이름과 같이 복사된 원본의 한 층만 복사합니다.
메모리에서 대상의 한 층을 복사하고, 중첩된 대상은 인용을 통해 전달된다.
밑줄 복사는 Object.assign 또는 스프레드시트 구조를 사용합니다.

const person = {
  firstname: "Alex",
  lastname: "Turner",
  birth: {
    year: 1986,
    month: 1,
    date: 6
  }
}
const newPerson = { ...person };

newPerson.firstname = "Miles";
newPerson.lastname = "Kane";

console.log(person); // {firstname: "Alex", lastname: "Turner", birth{...}}
console.log(newPerson); // {firstname: "Miles", lastname: "Kane", birth{...}}

레이어 1은 섀시 복사를 통해 복사되고 레이어 2의 객체는 복사된 소스이며 복사된 대상은 같은 메모리를 참조하므로 값이 변경되면 다른 레이어도 변경됩니다.

const person = {
  // 省略
}
const newPerson = { ...person };

newPerson.firstname = "Miles";
newPerson.lastname = "Kane";

newPerson.birth.month = 3;
newPerson.birth.date = 17;

console.log(person);
// {firstname: 省略, birth: {year: 1986, month: 3, date: 17}}
console.log(newPerson);
// {firstname: 省略, birth: {year: 1986, month: 3, date: 17}}

깊이 복사

깊이 복사는 참조 값이 아닌 복사 값을 복사합니다.
스토리지에 저장된 데이터를 모두 복제합니다.

깊이 있는 복제 수행

1. JSON.parse(jSON.stringify(obj))

'보글보글'은 자주 나오는 방법이다.

const person = {
  firstname: "Alex",
  lastname: "Turner",
  birth: {
    year: 1986,
    month: 1,
    date: 6
  }
}
const newPerson = JSON.parse(JSON.stringify(person));
newPerson.birth.month = 3;
newPerson.birth.date = 17;

console.log(person);
// {..., birth: {year: 1986, month: 1, date: 6}}
console.log(newPerson);
// {..., birth: {year: 1986, month: 3, date: 17}}

문제가 발생할 수 있으므로 주의해야 합니다.
https://qiita.com/seihmd/items/74fa9792d05278a2e898#undefined

2. lodash의clonneDeep

두 번째는lodash를 사용합니다.
사전에 설치해야 하지만 간단하게 사용할 수 있다.

import _ from "lodash";
const person = {
  // 省略
};
const newPerson = _.cloneDeep(person);
newPerson.birth.month = 3;
newPerson.birth.date = 17;

console.log(person);
// {..., birth: {year: 1986, month: 1, date: 6}}
console.log(newPerson);
// {..., birth: {year: 1986, month: 3, date: 17}}

3. structuredClone()

세 번째는 이번 조사의 디스크 복사와 깊이 복사의 계기 함수다.
지금 복사할 수 있는 유형이 아래에 적혀 있습니다.함수는 안 될 것 같습니다.
https://developer.mozilla.org/ja/docs/Web/API/Web_Workers_API/Structured_clone_algorithm

const person = {
  // 省略
};
const newPerson = structuredClone(person);
newPerson.birth.month = 3;
newPerson.birth.date = 17;

console.log(person);
// {..., birth: {year: 1986, month: 1, date: 6}}
console.log(newPerson);
// {..., birth: {year: 1986, month: 3, date: 17}}

총결산

원판 복사와 깊이 복사를 총결하였다.
실제 업무에서 샤론 사본을 자주 사용하지만, 이번 조사의 내용을 미리 알지 못하면 반할 것 같다.

슬라이드 사본
객체의 첫 번째 레이어를 복사합니다.2층이 있는 경우 참고 전달이 된다.Object.assign 또는 스프레드시트 구조를 사용할 수 있습니다.

깊이 복사
객체 값 자체를 복사합니다.깊이 있게 복사하는 방법에 따라 문제가 있을 수 있으니 주의하세요.
대상의 속성에 함수structuredClone()가 없으면 함수 등을 포함하는 깊이 있는 복제를 하려면 lodash의cloneDeep를 사용하는 것이 좋다.

참고 자료

https://jsprimer.net/basic/data-type/#data-type
https://jsprimer.net/basic/object/#copy