[ Weekly Paper3 ] - 얕은 복사(Shallow Copy)와 깊은 복사(Deep Copy)

자바스크립트 자료형

자바스크립트의 자료형은 기본형(원시형)과 참조형으로 나뉨

✨ 기본형

• 객체형을 제외한 타입은 기본형으로, 데이터 자체가 변수에 저장되는 것
• boolen, null, undefined, number, string, symbol(ES6) 등

✨ 참조형

• 객체 타입의 데이터로 변수에 참조형을 할당하면 해당 객체의 메모리 주소값이 저장됨
• Object, Array, Function, RegExp(정규 표현식), Set(ES6), Map (ES6) 등

이 때, 자료형이 기본형인지 참조형인지에 따라서 값을 복사하는 방식이 다른데, 기본형 처럼 실제값을 복사 하는 것을 깊은 복사, 객체의 메모리 주소값만 복사하는 것을 얕은 복사라고 함

얕은 복사

• 얕은 복사는 객체의 최상위 속성만 복사함. 즉, 속성이 기본 데이터 타입이면 그 값을 복사하고, 참조 데이터 타입이면 메모리 주소(참조)를 복사함

깊은 복사

• 깊은 복사는 객체의 모든 레벨에 대해 완전히 새로운 복사본을 생성해서 원본과 복사본이 서로 완전히 독립적임

❓ 객체를 프로퍼티 값으로 갖는 객체가 있을 경우

const obj = { x : { y : 1 }};

위와 같이 객체를 프로퍼티 값으로 같는 객체의 경우 얕은 복사는 한 단계까지만 복사하고 깊은 복사는 객체에 중첩되어 있는 객체까지 모두 복사함

즉, 얕은 복사는 객체에 중첩되어 있는 객체는 참조 값을 복사하고 깊은 복사는 객체에 중첩되어 있는 객체도 모두 복사해서 원시 값 처럼 완전한 복사본을 만든다

그래서 원시 값을 할당한 변수를 다른 변수에 할당하는 것을 깊은 복사, 객체를 할당한 변수를 다른 변수에 할당하는 것을 얕은 복사라고 부르는 경우도 있음

💡 참조형을 깊은 복사 하고 싶을 때

1. JSON.parse(JSON.stringify(object)) 사용

- 객체를 JSON 문자열로 변환한 후 다시 객체로 파싱하는 방법
- 일부 데이터 타입(함수, undefined, Date 객체, 정규 표현식 등)에 대해서는 잘 작동하지 않을 수 있음

2. 깊은 복사 함수를 직접 구현

- 직접 모든 프로퍼티를 탐색해서 값을 복사하는 커스텀 함수를 이용하는 방법

3. 외부 라이브러리 사용하기

- lodash 라이브러리의 cloneDeep() 함수와 같이, 이미 잘 구현되어 있는 외부 라이브러리를 사용