자바스크립트_Chapter 14. 기본형/참조형 데이터

이번 포스팅부터 다음 포스팅에서는 데이터 타입부터 얕은복사, 깊은 복사까지 많은 내용이 나오긴 할테지만 최대한 축약하여 정리하고자 한다 ! 

 

#1. 데이터 타입

자바스크립트에서는 데이터 타입을 크게 2가지로 나뉠수 있는데 바로 오늘의 제목인 기본형과 참조형 데이터다. 

출처 : https://velog.io/@imjkim49/자바스크립트-데이터-타입-정리

 

사실 우리가 이미 많이 봤던 데이터들이나 위와 같이 나눠지는 기준은 값의 저장방식과 불변성의 여부이다. 

[기본형과 참조형의 구분 기준]

1. 복제의 방식
- 기본형 : 값이 담긴 주소값을 바로 복제
- 참조형 : 값이 담긴 주소값들로 이루어진 묶음을 가리키는 주소값을 복제

2. 불변성의 여부
- 기본형 : 불변성을 띔
- 참조형 : 불변성을 띄지 않음

 

위 내용을 이해하기 위해서는 데이터가 저장되는 방식에 대해서 확인을 해야하는데 아래와 같다 !

 

#2. 데이터 할당

// 기본형 데이터 

/** 선언과 할당을 풀어 쓴 방식 */
var str;
str = 'test!';

/** 선언과 할당을 붙여 쓴 방식 */
var str = 'test!';

 

이렇게 변수를 선언하고 데이터를 할당했을 때 컴퓨터에서는 어떻게 저장을 할까? 

컴퓨터에는 메모리 라는것이 있고 각 변수와 데이터마다 고유한 주소값이 있어 해당 주소값에 저장하고 불러올 때는 해당 주소값을 참고한다. 

 

아래 메모리 주소 예시에 선언된 변수와 할당된 데이터 주소를 확인해보자.

 

변수 메모리 주소 예시

변수	주소	...	1002	1003	1004	...
	데이터		str/@5002

 

데이터 메모리 주소 예시

데이터	주소	...	5002	5003	5004	...
	데이터		'test!'	123

 

 

먼저 str이라는 변수가 1002 라는 주소에 저장되고, 'test!' 라는 문자열 데이터가 데이터 메모리인 5002 주소에 저장되었다. 

str이라는 변수에는 'test!' 문자열이 할당되었으니 문자열의 메모리 주소값인 /@5002 주소가 함께 저장된다. 

 

이때 str 이라는 변수에 123 이라는 숫자 데이터로 재할당하게 된다면 어떻게 될까? 

변수 주소는 그대로(1002) 있지만 그 안에 저장된 값이 str/@5003 으로 변경될 것이다.

(123이라는 데이터가 데이터 영역 주소에 없기 때문에 새로운 주소에 저장되었다.) 

 

기존 데이터 영역인 5002의 데이터가 변경된 것이 아니라 5003에 새롭게 저장되었다. 

더이상 쓰이지 않는 데이터 영역에 @5002 는 가비지 컬렉터에 의해 수거된다.

 

결론적으로 아래와 같이 정리할 수 있는데 

메모리를 기준으로 생각하는 두가지 개념 ! 

1. 변수  vs 상수
- 변수 : 변수 영역 메모리를 변경할 수 있음
- 상수 : 변수 영역 메모리를 변경할 수 없음 

2. 불변하다 vs 불변하지 않다(가변하다)
- 불변하다 : 데이터 영역 메모리를 변경할 수 없음
- 불변하지 않다 : 데이터 영역 메모리를 변경할 수 있음 

 

참조형 데이터는 어떨까? 

// 참조형 데이터는 별도 저장공간(obj1을 위한 별도 공간)이 필요합니다!
var obj1 = {
	a: 1,
	b: 'bbb,
};

 

변수 메모리 주소 예시

변수	주소	...	1002	1003	1004	...
	데이터		obj1/@8002~3

 

데이터 메모리 주소 예시

데이터	주소	...	5002	5003	5004	...
	데이터		1	'bbb'

 

데이터 메모리 주소 예시

obj1	주소	...	8002	8003	8004	...
	데이터		a/@5002	b/@5003

 

 

참조형 데이터의 경우 obj1을 위한 별도의 저장공간이 필요하고 위 예시와 같이 저장된다. 

이때 저장된 obj의 프로퍼티 중 a key값에 해당하는 value를 변경하면 어떻게 될까? 

var obj1 = {
	a: 1,
	b: 'bbb',
};

// 데이터를 변경해봅시다.
obj1.a = 2;

 

변수 메모리 주소 예시

변수	주소	...	1002	1003	1004	...
	데이터		obj1/@8002~3

 

데이터 메모리 주소 예시

데이터	주소	...	5002	5003	5004	...
	데이터		1	'bbb'	2

 

참조형 데이터 메모리 주소 예시

obj1	주소	...	8002	8003	8004	...
	데이터		a/@5004	b/@5003

 

 

데이터 영역에 저장된 값은 여전히 불변값이지만, obj1만을 위한 영역은 변경이 가능하다.

따라서 참조형 데이터를 불변하지 않다(가변하다) 고 표현할 수 있다.

 

중첩 객체도 한번 알아보자 ! 

var obj = {
	x: 3,
	arr: [3, 4, 5],
}

// obj.arr[1]의 탐색과정은 어떻게 될까요? 작성하신 표에서 한번 찾아가보세요!

 

변수 메모리 주소 예시

변수	주소	...	1002	1003	1004	...
	데이터		obj/@7002~3

 

데이터 메모리 주소 예시

데이터	주소	...	5002	5003	5004	...
	데이터		3	4	5

 

참조형 메모리 주소 예시

obj1	주소	...	7002	7003	7004	...
	데이터		x/@5002	arr/@8002~4

 

중첩 객체 메모리 주소 예시

arr	주소	...	8002	8003	8004	...
	데이터		0/@5002	1/@5003	2/@5004

 

 

 

이렇게 메모리에 저장되는 것에 따라 변수와 상수, 불변과 가변에 대해서 알아보았는데 

사실 이렇게 알아보게 된 이유는 앞으로 배우게 될 데이터 복사에 대해 이해해야하기 때문이다 ! 

 

다음 포스팅에서는 변수와 객체를 복사하였을 때 어떤 현상이 벌어지게되고 그로 인해 발생되는 문제가 무엇인지 확인해보고자 한다.