JavaScript에서 얕은 복사(shallow copy)와 깊은 복사(deep copy)는 객체의 복사 방식에 따른 차이를 나타낸다.

차이점

방식	참조 공유	복사 깊이	성능
얕은 복사	공유	객체의 첫 번째 수준의 속성만 복사	시간과 메모리 사용의 감소
깊은 복사	공유❌	모든 중첩된 객체까지 복사	시간과 메모리 사용의 증가

이러한 차이점은 객체의 구조와 필요한 복사 방식에 따라 중요하게 고려되어야 한다. 중첩된 객체나 배열이 있는 복잡한 객체의 경우, 깊은 복사가 더 적합할 수 있는 반면, 단순한 객체에 대해서는 얕은 복사가 더 효율적일 수 있다.

얉은 복사(Shallow Copy)

얕은 복사는 객체의 최상위 수준의 속성만 복사한다. 이 경우, 복사된 객체의 속성 중 하나가 다른 객체를 참조하고 있다면, 원본 객체와 복사된 객체는 그 참조된 객체를 공유하게 된다.

Object.assign({}, object) 또는 스프레드 연산자 {...object}를 사용하여 얕은 복사를 수행할 수 있다.

Object 얉은 복사 방법

1. Object.assign()

JAVASCRIPT
1const original = { a: 1, b: { c: 2 } };
2const copy = Object.assign({}, original);

2. Spread Syntax

JAVASCRIPT
1const original = { a: 1, b: { c: 2 } };
2const copy = { ...original };

Array 얉은복사 방법

1. Array.prototype.slice()

JAVASCRIPT
1const original = [1, 2, 3];
2const copy = original.slice();

2. Array.from()

JAVASCRIPT
1const original = [1, 2, 3];
2const copy = Array.from(original);

깊은 복사(Deep Copy)

깊은 복사는 객체의 모든 수준의 속성을 복사하여, 원본 객체와 전혀 독립된 복사본을 생성한다. 이를 통해 원본 객체에 있는 중첩된 객체들도 새로운 객체로 복사된다.

JSON.stringify()와 JSON.parse()

이 방법은 일부 데이터 타입(Function, Date 객체, undefined, Infinity, NaN, RegExp 객체 등)을 복사하지 못할 수 있다.

JAVASCRIPT
1const original = { a: 1, b: { c: 2 } };
2const copy = JSON.parse(JSON.stringify(original));

lodash 라이브러리의 _.cloneDeep()

JAVASCRIPT
1const _ = require("lodash");
2
3const original = { a: 1, b: { c: 2 } };
4const copy = _.cloneDeep(original);

재귀함수 사용

JAVASCRIPT
1function deepCopy(obj, hash = new WeakMap()) {
2  // 순환 참조를 처리하기 위한 hash 맵
3  if (hash.has(obj)) {
4    return hash.get(obj);
5  }
6
7  // 날짜 객체 처리
8  if (obj instanceof Date) {
9    return new Date(obj);
10  }
11
12  // 배열과 일반 객체 처리
13  if (typeof obj === "object" && obj !== null) {
14    const result = Array.isArray(obj) ? [] : {};
15    hash.set(obj, result);
16
17    for (const key in obj) {
18      // 객체의 모든 속성에 대해 깊은 복사 수행
19      result[key] = deepCopy(obj[key], hash);
20    }
21
22    return result;
23  }
24
25  // 기본 데이터 타입 및 함수는 그대로 반환
26  return obj;
27}
28
29// 사용 예제
30const original = { a: 1, b: { c: 2, d: new Date() }, e: [1, 2, 3] };
31const copy = deepCopy(original);
32
33console.log(copy); // 깊은 복사된 객체 출력