[JavaScript] 기본형 데이터와 참조형 데이터 비교

데이터 타입의 종류

JavaScript의 데이터 타입은 기본형(Primitive Type)과 참조형(Reference Type)으로 구분된다.

일반적으로 기본형은 할당이나 연산 시 복제되고, 참조형은 참조된다고 알려져 있다.

엄밀히 말하면 둘 모두 복제를 하긴 하지만, 기본형은 값이 담긴 주솟값을 바로 복제하는 반면,
참조형은 값이 담긴 주솟값들로 이루어진 묶음을 가리키는 주솟값을 복제한다.

 

---

변수 선언과 데이터 할당 과정

var a;		// 변수 a 선언
a = 'abc';	// 변수 a에 데이터 할당

var a ='abc';	// 변수 선언과 할당을 한 문장으로 표현

1. 변수 영역에서 빈 공간(@1003)을 확보한다.

2. 확보한 공간의 식별자를 a로 지정한다.

3. 데이터 영역의 빈 공간(@5004)에 문자열 'abc'를 저장한다.

4. 변수 영역에서 a라는 식별자를 검색한다(@1003).

5. 앞서 저장한 문자열의 주소(@5004)를 @1003의 공간에 대입한다.

* 변수 영역에서 값을 직접 대입하지 않고 데이터 영역에 따로 값을 저장하는 이유
 - 데이터 변환을 자유롭게 하기 위함
 - 메모리를 효율적으로 관리하기 위함

 

---

불변값

변수(variable)와 상수(constant)를 구분하는 성질은 '변경 가능성'이다.

불변값 ≠ 상수

변수와 상수를 구분짓는 변경 가능성의 대상은 변수 영역 메모리이다.
즉, 한 번 데이터 할당이 이뤄진 변수 공간에 다른 데이터를 재할당할 수 있는지 여부가 관건이다.
반면 불변성 여부를 구분할 때의 변경 가능성의 대상은 데이터 영역 메모리이다.

 

var a = 'abc'; 	// 1
a = a + 'def'; 	// 2

var b = 5; 	// 3
var c = 5; 	// 4
b = 7 		// 5

위 코드에서 1 ~ 2번은 변수 a에 문자열 'abc'를 할당한 뒤 'def'를 추가하는 코드이다.
이 경우 기존의 'abc'가 'abcdef'로 바뀌는 것이 아니라 새로운 문자열 'abcdef'를 만들어 그 주소를 변수 a에 저장한다.

3번은 변수 b에 숫자 5를 할당한다. 그러면 컴퓨터는 데이터 영역에서 5를 찾고 없으면 데이터 공간을 하나 만들어 저장하고 그 주소를 b 값에 저장한다.

4번은 변수 c에 숫자 5를 할당하는데 데이터 영역에 5라는 값이 이미 있기 때문에 변수 b와 동일한 값(주솟값)을 가진다.

5번은 변수 b의 값을 7로 변경하려하는데 5 를 7로 변경하는게 아니라 데이터 영역에서 7이라는 값을 찾고 없으면 7의 공간을 새로 만들어 그 주솟값을 가져온다.

결국 예제에서 사용한 'abc', 5, 7은 모두 다른 값으로 변경할 수 없다.
이것이 바로 불변값의 성질이다.

* 한 번 만들어진 값은 가비지 컬렉팅을 당하지 않는 한 영원히 변하지 않는다.

 

---

가변값

기본적인 성질은 가변값인 경우가 많지만 설정에 따라 변경 불가능한 경우도 있다.

 

참조형 데이터를 변수에 할당하는 과정

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

1. 컴퓨터는 변수 영역의 빈 공간(@1002)를 확보하고, 그 주소의 이름을 obj 1로 지정한다.

2. 데이터 영역 (@5001)에 데이터를 저장하려고 보니 여러개의 프로퍼티를 가지고 있다.

3. 객체 @5001의 변수 영역을 따로 만들어 @7103 및 @7104에 각각 a와 b라는 프로퍼티 이름을 지정한다.

4. 데이터 영역에서 숫자 1, 문자열 'bbb'를 검색하고 값이 있으면 그 주솟값을 가져오고, 값이 없다면 새로운 주소에 저장한 뒤 그 주솟값을 값 영역에 저장한다.

 

기본형 데이터와 참조형 데이터의 차이

객체의 변수(프로퍼티) 영역이 별도로 존재한다.

객체가 별도로 할애한 영역은 변수 영역일 뿐 데이터 영역은 기존의 메모리 공간을 그대로 활용한다.
데이터 영역에 저장된 값은 모두 불변값이다.
그러나 변수에는 다른 값을 얼마든지 대입할 수 있다.

이 부분 때문에 '참조형 데이터는 가변값이다' 라고 하는 것이다.

 

---

* 이 글은 코어 자바스크립트 책 내용을 참고하여 작성하였습니다.