JS

올바르게 객체 복사하기

영프로95 2022. 6. 30. 16:10

JS 객체를 함수를 통해 넘길때 call by value 형식을 취하기 때문에 메모리의 이점을 노리지 않는 이상 deep copy를 통해 원본객체를 안전하게 복사하는것이 좋다.

 

스프레드 연산자와 Object.assign

위의 2가지 방법 ex) ...a , Object.assign 으로는 1단계 까지는 원본 객체를 건드리지않고 복사가 잘되나

Depth가 2단계 이상인 객체는 원본객체가 수정됩니다.

1. 재귀함수

const copy = o =>{
  let out = {}
  let value, key
  for(key in o){
    value = o[key]
      out[key] = (typeof value === "object" && value != null)?
    copy(value) : value
  }
  return out
}
const a = {
  "b" : 1,
  "c" : {
    "d" : 2
  }
}
let b = copy(a)
b.c.d = 4
console.log(b)
// { b: 1, c: { d: 4 } }
console.log(a)
// { b: 1, c: { d: 2 } }

재귀함수 copy 가 재귀적으로 작동 하면서 객체를 새로운 객체에 담습니다.
위 코드와 같이 사용할 수 있습니다.

2. JSON.parse와 JSON.stringify

const a = {
  "b" : 1,
  "c" : {
    "d" : 2
  }
}

let b = JSON.parse(JSON.stringify(a))
b.c.d=41
console.log(b)
// { b: 1, c: { d: 41 } }
console.log(a)
// { b: 1, c: { d: 2 } }

객체를 문자열로 만든다음 다시 새로운 객체에 할당하는 방법입니다.

 

'JS' 카테고리의 다른 글

IIFE  (0) 2022.07.13
함수형 프로그래밍 1탄  (0) 2022.07.07
Lazy Loading  (0) 2022.07.03
이터러블 이터레이터 제너레이터  (1) 2022.05.22
자바스크립트 비동기와 동기  (0) 2022.05.16