[JS] shallow and deep copy

daniel·2022년 6월 8일
0

[JS]

목록 보기
14/16
post-thumbnail

from movie: The Island(2005)

shallow copy

A shallow copy of an object is a copy whose properties share the same references (point to the same underlying values) as those of the source object from which the copy was made.

shallow copy란 같은 참조값을 가지는 객체를 복사하는 것을 말한다.
복사된 객체는 original 객체와 같은 주소값을 가지므로 복사된 객체에서 값을 변경한다면 그 변경된 결과는 original 객체에 반영이된다.

deep copy

A deep copy of an object is a copy whose properties do not share the same references (point to the same underlying values) as those of the source object from which the copy was made.

deep copy는 복사하려는 원본 객체와 똑같은 구조와 똑같은 값을 가진 객체를 새로 생성한는 것이라고 생각하면된다.

JSON.parse(JSON.stringify()) 를 사용하여 구조와 값은 같지만 다른 주소값을 가지고있는 새로운 객체를 생성한다면 deep copy한것이라고 할 수 있다.

copying - spread operator

spread operator 를 활용한 copy방법은 1 depth 까지만 deep copy가 된다. 그 아래로는 shallow copy가된다.

위사진에서 name 부분이 변경이 안된것으로 보아 객체의 1-depth 는 deep copy되었다

객체 안에 객체를 만들어 1-depth를 넘긴 값을 변경할 경우 원본에서도 그 값이 변경됨을 확인 할 수 있다.
즉 shallow copy된것이다.


쉽게말하자면 shallow copy는 원본과 같은 참조값을 가지는 객체를 생성하는것이며
deep copy는 원본과 형태와 값은 같지만 다른 주소값을 가지는 객체를 생성하는것이라고 생각하면 되겠다.
spread 연산자를 활용한 복사방법은 1-depth 까지는 deep-copy 그 보다 아래 depth는 shallow-copy를 한다는것을 유의하자.

profile
FE 개발 velog

0개의 댓글