[JavaScript] 자바스크립트 얕은 복사 VS 깊은 복사

Q. 질문

자바스크립트에서 얕은 복사(Shallow Copy)와 깊은 복사(Deep Copy)에 대해 설명해 주세요.

 (코드잇 스프린트 위클리 페이퍼 #4)

 

A. 기본 배경

자바스크립트에서 기본형 데이터는 불변값이고, 참조형 데이터(객체)는 가변값이다.

 

불변객체
변하지 않는 객체

 

자바스크립트에서 객체는 가변값인데, 원본 객체가 변하지 말아야 할 상황에 불변 객체가 필요하다.

 

불변 객체가 필요한 상황

student1 객체에서 name 만 수정한 새로운 객체를 만들기 위해

student1 객체를 newStudent 에 복사하고, newStudent 의 이름을 변경하고 리턴하였다.

결과는 student2 에서 바뀐 이름이 나올 것 같지만, 실제로는 둘 다 Lee 로 변경되었다.

 

불변 객체 필요한 상황

결론

위에 코드처럼 객체의 가변성 에 따른 문제를 해결하기 위해 원본 객체의 값이 변하지 않도록 불변 객체를 만들어야 한다.

 

A. 불변 객체 만들기

1. 새 객체를 만들어 반환

새로운 객체를 만들고, 원복 객체 내부의 값을 복사 하고 반환한다.

새 객체 만들어 반환

1-1. 문제점 (하드코딩)

객체의 정보가 많거나, 변경해야 할 정보가 많을 경우 번거로워진다.

 

2. 얕은 복사(Shallow Copy)

반복문을 사용해 모든 프로퍼티(속성)를 복사 하여 새 객체를 반환한다.

얕은 복사

2-1. 문제점 (중첩된 객체 복사)

바로 아래 단계 값만 복사되어 중첩된 객체는 복사를 못 한다.

중첩된 객체 복사 못 함

2-2. 결론

중첩된 객체 프로퍼티의 데이터도 불변 객체로 만들어야 한다.

 

3. 깊은 복사(Deep Copy)

깊은 복사를 구현하기 위해 2가지 방법이 있다.

1. 재귀적인 복사
2. JSON.stringify

3-1. 재귀적인 복사

깊은 복사 함수를 재귀적으로 호출 하여, 내부에 존재하는 모든 단계의 객체들을 복사한다.

재귀적인 복사

3-2. JSON.stringify

객체를 문자열 로 변환 후, 다시 JSON 객체 로 변경한다. 이 방법이 실제로 업무에서 많이 사용한다고 한다.

JSON.stringify

 

마치며...

코드잇 스프린트 6기 조원들끼리 멘토님과 함께 코어 자바스크립트 책으로 테크톡을 진행했었고

얕은 복사, 깊은 복사 부분이 마침 내가 준비했던 부분이었다.

직접 책도 보고, 말로도 하고, 글로 작성하니 이 부분은 이제 잘 알게 된 것 같다.