[🐱 자바스크립트] 깊은 복사(Deep Copy) / 얕은 복사(Shallow Copy)

자바스크립트 깊은 복사 / 얕은 복사

깊은 복사와 얕은 복사

자바스크립트에는 복사 방식으로 얕은 복사와 깊은 복사가 있다.

얕은 복사는 객체를 참조하는 주소 값을 복사하고,
깊은 복사는 객체의 실제 값을 복사한다.

이러한 방식의 차이는 데이터의 종류에 따라 저장하는 방식이 달라지기 때문이다.
아래 데이터의 종류를 확인해보자.

---

자바스크립트 원시 타입 데이터 / 참조 타입 데이터의 다른 저장 방식

자바스크립트의 데이터는 원시 타입 데이터와 참조 타입 데이터가 존재한다.

원시타입 데이터 : number, string, null, undefined, bool, symbol
참조 타입 데이터 : array, object, function

🍎 원시타입 데이터

원시타입 데이터 는 입력 받은 값을 직접 스택 메모리 에 저장하는 방식이다.
따라서 재할당의 경우, 바로 데이터의 값이 변한다. 즉, 원시타입 데이터는 깊은 복사 만 가능한 셈이다.

🍎 참조타입 데이터

반면에 참조타입 데이터 는 저장하는 방식이 살짝 다르다. 할당한 값의 주소 를 스택 메모리 에 저장한다. 그리고 실제 데이터 의 값은 힙 이라는 메모리 공간에 저장해둔다.

이는 참조 타입 데이터(객체, 배열)의 변경에 따라 달라지는 메모리 영역의 사용을 유연하게 하기 위함이다.

🗯 이러한 특성 때문에 <배열 / 객체을 저장한 변수>를 다른 변수에 선언하여 복사하는 경우 <동일한 주소값을 복사>하는 것이므로 <동시에 두 변수에서 배열 / 객체의 수정> 이 이뤄진다.

참조 타입 데이터의 얕은 복사

참조 타입 데이터 값을 메서드를 호출하거나 직접적으로 값을 추가 및 수정한다는 것은 주소를 복사하는 것이므로 얕은 복사 에 해당한다.

참조 타입 데이터의 깊은 복사

하지만 참조 타입 데이터 또한 깊은 복사 가 가능하다.
바로 JSON.parse 와 JSON.stringify 를 사용하는 것이다.

---

깊은 복사를 위한 JSON.stringify, JSON.parse 메서드

const newArr = JSON.parse(JSON.stringify(arr))

arr 배열의 값까지 복사하여 newArr에 새로 할당해주었다.

• JSON.stringify() 메서드는 JavaScript 값이나 객체를 JSON 문자열로 변환
• JSON.parse() 메서드는 JSON 문자열의 구문을 분석하고, 그 결과에서 JavaScript 값이나 객체를 생성

-> 하지만 JSON.stringify, JSON.parse를 사용하는 것은 성능이 느리고
함수 Math, date 같은 내장 객체 복사를 할 수 없으므로 사용을 지양하는 것이 좋다.

---

가장 효율적인 복사 방식은 무엇일까?

✅ 전개 연산자 (spread 문법) 을 통한 얕은 복사

ex. const newArr = [...arr]

✅ lodash 라이브러리의 활용

lodash 라이브러리는 배열, 숫자, 객체, 문자열 등을 다루기 위한 다양한 함수를 제공하고 있다.