얕은 복사와 깊은 복사

🥸 원시 값을 복사할 때에는 새로운 메모리 공간을 확보하여 값을 저장하기 때문에 원본이나 복사본의 일부를 수정해도 서로에게 영향이 미치지 않는 깊은 복사가 되는 반면, 참조 값을 복사할 때에는 메모리 주소 값을 복사하기 때문에 원본이나 복사본의 일부를 수정할 경우 서로에게 영향을 미치게 되는 얕은 복사가 됩니다.

원시 값 복사

let num = 10;

let copy = num;

num = 20;

console.log(num, copy); // 20 10

참조 값 복사

const obj = {
  num: 10
};

const copy = obj;

obj.num = 20;

console.log(obj, copy); // {num: 20} {num: 20}

참조 값을 깊은 복사 하는 방법

1. spread operator 사용

const obj = {
  num: 10,
  deepNum: {
  	num: 20
  }
};

const copy = {...obj};

console.log(obj === copy); // false
console.log(obj.deepNum === copy.deepNum); // true

obj.num = 30;
obj.deepNum.num = 30;

console.log(obj, copy); // { num: 30, deepNum: { num: 30 } } { num: 10, deepNum: { num: 30 } }

깊이 1의 객체에 대해서만 깊은 복사가 되고 깊이 2이상의 깊이에서는 얕은 복사가 된다.

2. lodash의 cloneDeep() 사용

const obj = {
  num: 10,
  deepNum: {
  	num: 20
  }
};

const copy = _.cloneDeep(obj);

console.log(obj === copy); // false
console.log(obj.deepNum === copy.deepNum); // false

라이브러리를 설치해야한다는 단점이 있다.

3. JSON.parse() & JSON.stringify() 사용

const obj = {
  num: 10,
  deepNum: {
  	num: 20
  }
};

const copy = JSON.parse(JSON.stringify(obj));

console.log(obj === copy); // false
console.log(obj.deepNum === copy.deepNum); // false

객체 내에 내장 함수인 Map, Set, Date, RegExp 등을 포함한 값이 있을 경우 에러가 발생한다.

4. structuredClone() 사용

const obj = {
  num: 10,
  deepNum: {
  	num: 20
  }
};

const copy = structuredClone(obj);

console.log(obj === copy); // false
console.log(obj.deepNum === copy.deepNum); // false

객체 내에 함수가 포함되어 있으면 에러가 발생한다.

🔥 실행 속도는 데이터가 적은 경우에는cloneDeep > JSON > structuredClone 순으로 빠르지만, 데이터가 많은 경우에는 structuredClone이 JSON보다 빠른 경우도 있다.
속도 비교 사이트
https://www.measurethat.net/Benchmarks/Show/17971/0/lodash-clonedeep-vs-structuredclone-vs-json-parse