개체를 복사하는 방법?

여러분, 그래서 이 주제는 원본 객체를 변경하지 않고 객체를 복사하는 방법에 관한 것입니다. 때때로 우리는 실수로 원본 객체도 변경된 것을 모르고 객체를 복사하기 때문입니다.

시작하자

딥 카피와 얕은 카피의 이해

문자열, 숫자 및 부울과 같은 기본 데이터 유형을 포함하는 재할당 작업에서 원래 변수는 JavaScript에 의해 복사됩니다.

예를 들어,

y = x //  x is copied into y

y++ // y is incremented

console.log(y) // now 4
console.log(x) // still 3

이 경우 값 3이 y에 복사된 다음 x와 y의 연결이 끊어집니다. 따라서 y를 변경해도 x에는 영향을 미치지 않습니다.

반대로 배열 및 객체와 같은 기본이 아닌 데이터 유형의 경우 값에 대한 참조만 전달됩니다. 따라서 사본이 변경되면 원본도 변경됩니다. 이를 얕은 복사라고도 합니다.

let aalu = {name: "aalu"};

let bhalu = aalu;
bhalu.name = "bhalu";

console.log(aalu.name);  // outputs "bhalu"
console.log(bhalu.name); // outputs "bhalu"

대신 원본 개체에 영향을 주지 않고 수정할 수 있도록 개체를 복사하려면 전체 복사본을 만들어야 합니다.

이제 Obj 복사에 대해 이야기하겠습니다.

1. JSON.stringify() 및 JSON.parse()

먼저 JSON.stringify()와 JSON.parse()가 무엇인지에 대해 이야기해 볼까요?
JSON.stringify() : 이 메소드는 JavaScript 객체 또는 값을 JSON 문자열로 변환합니다.
JSON.parse() : 이 메소드는 JSON 문자열을 구문 분석하여 문자열에서 설명하는 JavaScript 값 또는 객체를 구성합니다.

이 두 가지 방법을 결합하여 다음과 같은 개체의 복사본을 만들 수 있습니다.

const user = {
    name: "JSON",
    age: "21",
    job: "standard file format and data interchange format",
}

let clone = JSON.parse(JSON.stringify(user))

console.log(user)
console.log(clone)

/*
{
  age: 21,
  job: "standard file format and data interchange format",
  name: "JSON"
}
{
  age: 21,
  job: "standard file format and data interchange format",
  name: "JSON"
}
*/

복사 객체가 변경되면 원본 객체는 동일하게 유지됩니다.

clone.age = 32

console.log(user)
console.log(clone)

/*
{
  age: 21,
  job: "standard file format and data interchange format",
  name: "JSON"
}
{
  age: 32,
  job: "standard file format and data interchange format",
  name: "JSON"
}

그러나 이것은 함수 내부에 있던 함수로 작업할 때 문제를 일으키기도 합니다.

객체user에 incrementAge라는 메서드가 있다고 가정합니다.

const user = {
    name: "JSON",
    age: "21",
    job: "standard file format and data interchange format",
    incrementAge: function() {
         this.age++
    }
}

복사된 개체에서는 기능을 사용할 수 없습니다. 따라서 이 방법은 개체 내에 함수가 없는 경우에만 깊은 복사를 수행합니다.

Object.assign()

개체 생성자 메서드 중 Object.assign()는 하나 이상의 소스 개체에서 대상 개체로 값과 속성을 복사하는 데 사용됩니다. 소스 개체에서 복사한 속성과 값이 있는 대상 개체를 반환합니다.

const user = {
    name: "JSON",
    age: "21",
    job: "standard file format and data interchange format",
    incrementAge: function() {
         this.age++
    }
}

let clone = Object.assign({}, user) // Copies user into clone

clone.age = 32

console.log(user)
console.log(clone)

/*
{
     age: 21,
     incrementAge: function() {
       this.age++
     },
     job: "standard file format and data interchange format",
     name: "JSON"
}
{
     age: 32,
     incrementAge: function() {
       this.age++
     },
     job: "standard file format and data interchange format",
     name: "JSON"
}
*/

그러나 한 가지 기억해야 할 사항Object.assign()은 메서드가 개체에 대해 부분 전체 복사만 수행한다는 것입니다.

이것이 의미하는 바를 이해하기 위해 다음을 고려하십시오.

const user = {
    name: "JSON",
    age: 21,
    job: "standard file format and data interchange format",
    location: {
      city: "Lagos",
    }
}

const clone = Object.assign({}, user)

clone.age = 32
clone.location.city = "New York"

console.log(user)
console.log(clone)

/*
{
  age: 21,
  job: "standard file format and data interchange format",
  location: {
       city: "New York",
  },
  name: "JSON",
}

{
  age: 32,
  job: "standard file format and data interchange format",
  location: {
       city: "New York",
  },
  name: "JSON",
}
*/

중첩된 개체 내에서 속성을 변경할 때마다(clone에서) 원래 개체에서 동일한 속성도 변경됩니다(user). 원래 개체의 나이 속성은 그대로 유지되지만 도시 속성은 재할당 작업으로 인해 변경되었습니다. 따라서 Object.assign() 메서드는 중첩 개체가 없는 개체를 딥 복사하는 데 사용해야 합니다.

확산 연산자( ... )

ES2015에 도입된 이 연산자는 매우 짧고 단순하기 때문에 훌륭합니다. 모든 값을 새 개체로 '확산'합니다. 다음과 같이 사용할 수 있습니다.

const obj = {
  age: 21,
  job: "standard file format and data interchange format",
  location: {
       city: "New York",
  },
  name: "JSON",
}

const copyObj = {...obj}

copyObj.job = "nothing"

console.log(obj, copyObj)

/*

{
  age: 21,
  job: "standard file format and data interchange format",
  location: {
       city: "New York",
  },
  name: "JSON",
}

{
  age: 21,
  job: "nothing",
  location: {
       city: "New York",
  },
  name: "JSON",
}

그러나 Object.assign() 와 마찬가지로 스프레드 연산자는 부분 복사본만 만듭니다. 따라서 중첩된 개체가 있는 개체는 깊이 복사되지 않습니다.

Lodash 클론Deep()

Lodash는 모듈성, 성능 및 추가 기능을 제공하는 최신 JavaScript 유틸리티 라이브러리입니다. Lodash는 또한 JavaScript에서 개체의 심층 복제를 위한 유틸리티 메서드 _.cloneDeep()를 제공합니다.

const deepClonedObject = _.clonedeep(originalObject);

이것과 그 방법에 대한 자세한 내용은 다음에서 확인할 수 있습니다.
https://lodash.com/docs

결론

지금까지 살펴본 것처럼 JavaScript에서 변수를 복사하는 방법에는 여러 가지가 있습니다. 모든 경우에 완벽한 방법은 없으므로 각 상황에 가장 적합한 방법을 신중하게 선택해야 합니다.