javascript) 라이브러리 없이 깊은 복사 구현하기

string
1
undefined
null
true

위와 같은 원시타입 데이터는

복사를 하면 바로 깊은 복사가 일어난다.

let a = 1 // 1
let b = a // 1

둘은 전혀 별개의 address를 참조해서 

완전히 다른 녀석이 된다. (깊은 복사)

하지만 객체나 배열은 다르다

let a = [1,2,3,4,5] // 주소1
let b = a // 주소1

a[0] = 2를 선언하는 순간,

b를 콘솔에 찍으면 [2,2,3,4,5]가 찍힌다.

같은 주소를 참조해서 그렇다.

이를 해결하는 방법으로는 여러가지가 있지만,

가장 간단한 방법은 stringify 하는 것이다.

let b = JSON.parse(JSON.stringify(a))

이걸로 간단하게 깊은 복사가 가능하다.

다만 이건 null이나 undefined, Function을 복사하지 못하기 때문에

숫자나 문자만 들어있는 객체에만 사용할 수 있다는 점이 안타깝다.

물론, lodash라는 라이브러리를 사용하면 간단하게 풀리지만,

여기서는 라이브러리 없이 순수 js로 해결해보기로 한다.

function deepCopy (obj) {
  if(typeof obj !== 'object') {
    return obj
  } else if(Array.isArray(obj)) {
    return obj.map(elm => deepCopy(elm))
  } else {
    const newObj = {}
    Object.entries(obj).forEach(([key,value]) => {
      newObj[key] = deepCopy(value)
    })
    return newObj
  }
}

1. 객체가 아니면 그 요소 자체를 반환

2. array일 경우 map으로 복사한 array를 반환

(array내부 요소는 재귀함수를 또 돌림)

3. 객체일 경우 새 객체에 할당

(객체 내부의 value들은 역시 재귀함수를 돌림)

물론 이 역시도 Date객체나 일부 객체를 완벽하게 복사하지는 못하는 것으로 알고있지만,

대부분의 경우에서는 이 함수로 깊은 복사를 수행할 수 있다.

역시 뭐든지

바닐라 스크립트로 작성을 해봐야함.

그래야 자바스크립트 원리 자체를 이해하고 

실력이 성장하는 데에 큰 도움이 된다.

※ 참고로 [...array] 스프레드 연산자는 1depth만 복사를 수행하기 때문에 

2depth 이상의 객체나 배열에는 사용할 수 없다.

.