참조형 데이터

FE/JavaScript

yun_9 2024. 4. 8. 15:45

기본형 데이터와 다른 메모리 할당 매커니즘을 가지고 있어

데이터 가변성을 나타내고 있다.

참조형 데이터의 종류에는 아래와 같다.

1. let a = { name: "Kim" } 이라는 객체 선언

변수 영역

변수명	a
주소	@201

데이터 영역 (Stack)

주소	201	202
데이터	@401~?	"Kim"

데이터 영역 (Heap)

객체의 경우 여러개의 변수와 값을 모아놓은 그룹이기 때문에

기본형과는 다르게 데이터 영역 주소 201에 모든 데이터 값을 저장할 수가 없다.

또 특이하게 주소 201의 데이터에 ~? 라고 표시가 되어있는데 이는

이 객체가 계속해서 확장 될 수 있기 때문에 401부터 n번까지를 계속 참조하겠다는 뜻이다.

2. let a = { name: "Kim } a.name = ' lee '

변수 영역

변수명	a
주소	@201

데이터 영역 (Stack)

주소	201	202	203
데이터	@401~?	"Kim"	"lee"

데이터 영역 (Heap)

참조형 데이터는 기본형 데이터가 가지는 메모리 저장 영역 외 별도의 저장 영역이 더 있는 것 말고는

전반적으로 값이 변경되는 매커니즘은 흡사하다.

이전에 썼던 기본형 데이터 예시에서

let a = 1; a=2 값 변경 시 데이터 영역의 메모리에 새로 값을 할당하여 변수 영역의 주소 @201 => @202 로 주소가 바뀌었고 기존 @201의 값은 변경되지 않기 때문에 불변성

참조형 데이터에서 let a = { name: "Kim } a.name = ' lee ' 객체의 값 변경 시 변수 영역의 참조 주소는

@201 => @201로 변경되지 않은 채 @201 주소의 데이터 영역 내에서 변화가 일어나기 때문에 가변성

3. let a = { name: "Kim } let b = a; b.name = ' lee '

변수 영역

변수명	a	b
주소	@201	@201

데이터 영역 (Stack)

주소	201	202	203
데이터	@401~?	"Kim"	"lee"

데이터 영역(Heap)

let b = a를 선언하게 되면 b도 a와 같은 주소를 참조

그런데 이 상태에서 b 객체의 값을 변경하게 된다면 같은 주소의 값이 변경 되기 때문에 a.name의 값도 lee로 변경

이러한 특성은 얕은 복사와 깊은 복사로 이어지고, 때문에 참조형 데이터를 복사하고 수정할때는 주의 !

얕은 복사 & 깊은 복사

얕은 복사

주소값을 복사 (스택 영역)하기 때문에 참조하고 있는 실제 값은 같다.

깊은 복사

실제 값을 메모리 공간에 복사 (힙 영역) 하기 때문에 참조하고 있는 실제 값이 다르다.