JavaScript Shallow Copy와 Deep Copy: 개념, 활용, 장단점

JavaScript Shallow Copy와 Deep Copy: 개념, 활용, 장단점

1. Shallow Copy와 Deep Copy란?

자바스크립트에서 객체나 배열을 복사할 때, Shallow Copy와 Deep Copy는 두 가지 주요한 방법입니다.

• Shallow Copy(얕은 복사): 기존 객체의 레퍼런스를 복사하여 새로운 객체를 생성합니다. 내부 객체는 같은 레퍼런스를 공유합니다.
• Deep Copy(깊은 복사): 객체의 모든 레벨에 대해 완전한 복사를 수행합니다. 새로운 객체는 기존 객체와 완전히 독립적입니다.

2. Shallow Copy와 Deep Copy의 역할

• Shallow Copy: 객체의 일부분만 수정하고 싶을 때 유용하며, 복사가 빠릅니다. 그러나 내부 객체의 변경은 공유되어 문제가 발생할 수 있습니다.
• Deep Copy: 완전한 독립성을 제공하여 내부 객체의 변경이 영향을 미치지 않습니다. 하지만 복사 과정이 복잡하고 성능 저하의 가능성이 있습니다.

3. 어느 상황에 Shallow Copy와 Deep Copy를 사용해야 하는가?

• Shallow Copy: 내부 객체의 변경이 무시될 수 있는 경우, 복사 속도가 중요한 경우, 메모리 사용량을 최소화해야 하는 경우.
• Deep Copy: 내부 객체의 변경이 독립적으로 이루어져야 하는 경우, 복사 속도가 느려도 상관없는 경우, 완전한 객체 독립성이 필요한 경우.

4. Shallow Copy와 Deep Copy의 장단점

Shallow Copy의 장단점:

장점:

• 복사 속도: 레퍼런스만을 복사하기 때문에 속도가 빠릅니다.
• 메모리 사용량: 메모리 사용량이 낮습니다.

단점:

• 내부 객체 공유: 내부 객체는 여전히 레퍼런스를 공유하므로 변경이 반영될 수 있습니다.

Deep Copy의 장단점:

장점:

• 완전한 독립성: 내부 객체와 완전히 독립적이므로 변경이 반영되지 않습니다.

단점:

• 복사 속도: 복사하는 데 시간이 많이 걸릴 수 있습니다.
• 메모리 사용량: Shallow Copy에 비해 더 많은 메모리를 사용할 수 있습니다.

5. Shallow Copy와 Deep Copy를 이해할 수 있는 예제 코드

Shallow Copy 예제

const originalArray = [1, 2, { a: 3 }];
const shallowCopyArray = [...originalArray];
shallowCopyArray[2].a = 99;

console.log(originalArray); // [1, 2, { a: 99 }]

Deep Copy 예제

const originalObject = { x: 1, y: { z: 2 } };
const deepCopyObject = JSON.parse(JSON.stringify(originalObject));
deepCopyObject.y.z = 99;

console.log(originalObject); // { x: 1, y: { z: 2 } }

6. 연관된 기술

• Immutable.js: 객체의 불변성을 유지하면서 효율적인 데이터 구조를 제공하는 라이브러리.
• Lodash: 다양한 유틸리티 함수를 제공하며, _.cloneDeep 함수를 통해 깊은 복사를 수행할 수 있습니다.

Shallow Copy와 Deep Copy는 객체 및 배열 복사 시 선택해야 하는 중요한 개념입니다. 상황에 따라 적절한 방법을 선택하여 프로그램의 안정성과 성능을 유지할 수 있습니다.