JavaScript의 딥 카피 배열

1. JavaScript의 얕은 복사 및 깊은 복사 소개
2. structuredClone() 메서드를 사용하여 JavaScript에서 객체의 딥 카피 생성
3. JSON.parse() 및 JSON.stringify() 메서드를 사용하여 JavaScript에서 객체의 딥 카피 생성
4. Lodash 라이브러리를 사용하여 JavaScript에서 객체의 딥 카피 생성

이 기사에서는 깊고 얕은 복사 개념을 배웁니다. 또한 이 기사에서는 JavaScript에서 배열에 대해 깊은 복사를 수행하는 방법을 소개합니다.

JavaScript의 얕은 복사 및 깊은 복사 소개

JavaScript에서 개체는 두 가지 방법으로 복사할 수 있습니다. 깊은 복사와 얕은 복사가 있습니다.

먼저 얕은 복사에 대해 알아보겠습니다. 개체의 단순 복사본에는 원본 개체의 속성과 동일한 참조를 가리키는 속성이 있습니다.

여기서 원본 개체는 복사본이 만들어지는 개체입니다. 개체와 해당 얕은 복사본은 동일한 참조를 공유하므로 둘 중 하나의 변경 사항이 다른 개체에 반영됩니다.

예를 들어 이해해 봅시다.

속성 이름이 name이고 값이 kevin인 개체 student1을 고려하십시오. 다음으로 다른 변수인 student2를 만들고 student2 값을 할당합니다.

let student1 = {name: 'kevin'}

let student2 = student1

여기에서는 student1 개체의 얕은 복사본을 만들었습니다. 이제 student2 개체에서 name 속성 값을 다른 값으로 변경해 보겠습니다.

예를 들어 새 값은 john입니다. student1과 student2 개체를 모두 인쇄할 때 값은 john과 동일합니다.

예제 코드:

let student1 = {name: 'kevin'}

let student2 = student1

 student2.name = "john"

console.log(student1)
console.log(student2)

출력:

{
  name: "john"
}
{
  name: "john"
}

이것이 객체의 얕은 복사본이 작동하는 방식입니다. 두 개체가 동일한 참조를 공유하므로 소스 개체의 속성을 변경할 수 있습니다.

그러나 개체의 깊은 복사본은 정반대로 작동합니다. 복사본과 원본 개체가 동일한 참조를 가리키지 않으므로 개체의 속성 중 하나를 변경해도 다른 속성은 변경되지 않습니다.

아래 섹션에서는 딥 카피와 JavaScript에서 딥 카피를 달성하는 방법에 대해 알아봅니다.

structuredClone() 메서드를 사용하여 JavaScript에서 객체의 딥 카피 생성

JavaScript에서 객체의 전체 복사본을 생성하는 방법 중 하나는 structuredClone() 메서드를 사용하는 것입니다. 이 방법은 개체를 완전히 복제하는 구조화된 복제 알고리즘을 사용합니다.

이 메서드는 복제할 개체를 매개 변수로 사용합니다. 복제를 수행해 봅시다.

예를 들어, name 속성에 대해 kevin 값을 포함하는 위의 student1 개체를 고려하십시오. 다음으로 structuredClone() 메서드를 사용하고 student1 객체를 매개변수로 제공합니다.

마지막으로 메서드를 변수 student2에 할당합니다. 이렇게 하면 student2 개체가 student1 개체의 전체 복사본이 됩니다.

다음으로 student2 개체의 속성을 john으로 변경합니다.

이번에는 두 개체를 인쇄할 때 속성 값이 동일하지 않습니다. student1 개체는 kevin 값을 가지며 student2는 name 속성에 대해 john을 갖습니다.

예제 코드:

let student1 = {
  name: 'kevin',

}

let student2 = structuredClone(student1)

student2.name = 'john'

console.log(student1)
console.log(student2)

출력:

{
  name: "kevin"
}
{
  name: "john"
}

이것이 structuredClone() 메서드를 사용하여 JavaScript에서 딥 카피를 수행하는 방법입니다.

JSON.parse() 및 JSON.stringify() 메서드를 사용하여 JavaScript에서 객체의 딥 카피 생성

JSON.parse() 및 JSON.stringify() 메서드를 사용하여 객체의 전체 복사본을 만들 수도 있습니다. JSON.stringify() 메서드는 개체 또는 값을 문자열로 변환하는 반면 JSON.parse() 메서드는 JSON 문자열을 구문 분석하여 개체 또는 값을 생성합니다.

먼저 JSON.stringify() 메서드를 사용하여 개체를 문자열로 변환한 다음 JSON.parse() 메서드를 사용하여 개체를 구문 분석하여 개체의 전체 복사본을 만들 수 있습니다.

예를 들어 동일한 student1 개체를 고려하고 JSON.stringify() 메서드를 사용하여 개체를 문자열로 변환합니다. 그런 다음 결과에 JSON.parse() 메서드를 사용합니다.

변수 student2에 식을 할당합니다. 다음으로 위에서 한 것처럼 첫 번째 개체의 속성을 변경하고 두 개체를 모두 인쇄합니다.

예제 코드:

let student1 = {
  name: 'kevin',

}


let student2 = JSON.parse(JSON.stringify(student1))

student2.name = 'john'

console.log(student1)
console.log(student2)

출력:

{
  name: "kevin"
}
{
  name: "john"
}

이 두 개체의 속성 값이 다른 것을 볼 수 있습니다. 즉, 소스 개체의 전체 복사본을 생성했음을 의미합니다. 따라서 JSON.parse() 및 JSON.stringify() 메서드를 사용하여 JavaScript에서 개체의 전체 복사를 수행할 수 있습니다.

그러나 함수와 객체로 작업할 때 문제가 발생합니다. 함수와 Date() 개체를 포함하는 개체의 심층 복제를 구현하여 문제를 더 명확하게 파악해 보겠습니다.

아래 예와 같이 student1 개체에 새 필드를 추가합니다.

예제 코드:

let student1 = {
  name: 'kevin',
  age: function() {
    return 24;
  },
  enrolledDate: new Date()

}

다음으로 JSON.stringify() 함수와 함께 JSON.parse()를 사용하여 위와 같이 개체의 전체 복사본을 만듭니다. 그런 다음 첫 번째 개체의 이름 속성을 변경합니다. 마지막으로 두 개체를 모두 인쇄합니다.

예제 코드:

let student2 = JSON.parse(JSON.stringify(student1))
student2.name = 'john'

console.log(student1)
console.log(student2)

출력:

{
  name: 'kevin',
  age: [Function: age],
  enrolledDate: 2023-01-19T16:15:30.914Z
}
{ name: 'john', enrolledDate: '2023-01-19T16:15:30.914Z' }

여기에서 개체의 전체 복사본에서 몇 가지 눈에 띄는 문제를 볼 수 있습니다. 첫 번째 문제는 함수에 복제된 개체가 없다는 것입니다.

다른 문제는 중첩 객체 new Date()의 유형 변경입니다. 복제 후 new Date() 객체는 String 유형으로 변경됩니다. 날짜 주변의 따옴표를 볼 수 있습니다.

따라서 JSON.parse() 및 JSON.stringify() 메소드를 사용할 때 함수와 유형을 포함하는 객체의 딥 카피 중에 문제를 발견했습니다. 기사의 다음 섹션에서 문제를 해결할 것입니다.

Lodash 라이브러리를 사용하여 JavaScript에서 객체의 딥 카피 생성

lodash 라이브러리를 사용하여 함수와 중첩 객체를 복제하면서 문제를 극복할 수 있습니다. lodash는 cloneDeep() 메서드를 제공합니다. 이 메서드는 소스 개체를 매개 변수로 사용하고 이를 딥 복제합니다.

다음 명령으로 라이브러리를 설치할 수 있습니다.

npm i -g lodash

예를 들어 코드 맨 위에 라이브러리가 필요합니다. 상수 _에 할당합니다.

상수를 사용하여 student1 개체가 매개변수인 cloneDeep()을 호출합니다. 이전과 같이 개체의 속성 값을 변경합니다. 마지막으로 두 개체를 모두 인쇄합니다.

예제 코드:

const _ = require('lodash')
let student1 = {
  name: 'kevin',
  age: function() {
    return 24;
  },
  enrolledDate: new Date()

}


let student2 = _.cloneDeep(student1)

student2.name = 'john'

console.log(student1)
console.log(student2)

출력:

{
  name: 'kevin',
  age: [Function: age],
  enrolledDate: 2023-01-23T15:02:56.059Z
}
{
  name: 'john',
  age: [Function: age],
  enrolledDate: 2023-01-23T15:02:56.059Z
}

마지막으로 개체를 딥 복제하고 기능과 중첩된 개체를 계속 사용할 수 있습니다. 따라서 lodash 라이브러리를 사용하여 JavaScript에서 개체의 깊은 복제본을 만들 수 있습니다.