JS 원본 내용 그대로 저장 하기 Deep Copy (배열, 객체)

개발을 하다 보면 원본과 사본을 반복적으로 참조해야할때가있다.

 

이때 보통 나는 이렇게 얕은복사 참조 복사를 했다.

 

하지만 반복적으로 원본을 사용해야하는 개발에서는 알맞지가 않다. 그러므로 원본이 변경이 되지않는 딥카피를 해야한다. 

 

1. 배열 Array

방법 : slice()를 사용하여 딥카피를 한다.

 

얕은 복사 :  

  // 얕은복사
  const a = [1, 2, 3]
  let b = a
  b[3] = 7
  
  console.log(a)
  // [ 1, 2, 3, 7 ]
  console.log(b)
  // [ 1, 2, 3, 7 ]

 

딥 카피 : 

  // 딥 카피
  const a = [1, 2, 3]

  let b = a.slice()

  b[3] = 7
  
  console.log(a)
  // [ 1, 2, 3 ]

  console.log(b)
  // [ 1, 2, 3, 7 ]

이렇게 딥카피를 하면 배열의 원본 데이터를 지키며 사본 수정 할 수 있다.

 

2. 객체 Object

방법 : Object.assign()를 사용하여 딥카피를 한다.

 

얕은 복사 :

  // 얕은 복사
  const a = {
    name: '짱구',
    age: 5
  }
  const b = a 

  b.name = '철수'
  b.age = 30

  console.log(a)
  // { name: '철수', age: 30 }
  console.log(b)
  // { name: '철수', age: 30 }

 

딥 카피 : 

  // 딥 카피
  const a = {
    name: '짱구',
    age: 5
  }
 
  const b = Object.assign({}, a)

  b.name = '철수'
  b.age = 30

  console.log(a)
  // { name: '짱구', age: 5 }
  console.log(b)
  // { name: '철수', age: 30 }

출처 : https://junwoo45.github.io/2019-09-23-deep_clone/

출처 : https://bbaktaeho-95.tistory.com/37