JavaScript 에서의 원시형 데이터 타입 (primitive data type)과 참조형 데이터 타입(reference data type)의 차이
앞의 글에서 보았듯이, **JavaScript 에서의 데이터타입은 원시형 데이터 타입 (primitive type) 과 참조형 데이터 타입 (reference type)** 으로 나눌 수 있다.
하지만, 보통 우리는 변수 (variable) 과 식별자 (identifier) 을 혼동하는 경우가 많은데, 변수가 쓰여야 할 곳에는 식별자를 / / 식별자가 쓰여야 할 곳에는 변수를 쓰는 식으로 말이다.
우리는 문맥에 따라서 무엇을 말하고자 하는지를 유추할 수 있지만, 이 둘의 차이는 확실히 하여야 한다.
변수란 쉽게 말하자면, ‘변할수 있는 무언가 ‘ 라고 정의할 수 있을것이다. 여기서 무언가는 우리가 담고자 하는 데이터를 말할수 있을것이다. ( Number, String, Object, Array, … )
식별자 는 간단하게 이 변수가 담고있는 데이터를 식별하는데 사용하는 이름 즉, 변수명 이다.
변수 영역에 빈 공간을 확보한수 식별자 (변수명) 를 선언한 후 데이터를 저장한다고 생각하면 편하다.
데이터의 할당을 알기 전에 먼저 가변값 데이터와 불변값 데이터에 대해 먼저 이해해야 하는데,
기본형 데이터는 모두 불변값이다. 그렇다면 참조형 데이터는 모두 가변값일까 ? 그렇지 않다. 참조형 데이터가 가지는 기본 성질은 가변값인 경우가 많지만 Object.freeze() , Object.defineProperty() 를 활용해 불변값으로 활용하는 방안도 존재하기 때문이다.
참조형 데이터의 할당
let obj1 = {
a: 1,
b: 'bbb',
};
1. 컴퓨터는 우선 변수 영역의 빈 공간 (@1002)을 확보하고, 그 주소의 이름을 obj1 으로 지정.
2. 임의의 데이터 저장 공간(@5001) 에 데이터를 저장하려고보니 여러 개의 프로퍼티로 이루어진 데이터 그룹이다. 이 그룹 내부의 프로퍼티들을 저장하기 위해 별도의 변수 영역을 마련하고, 그 영역의 주소(@7103 ~ ?)를 @5001 에 저장한다. ( 객체의 프로퍼티들을 저장하기 위한 메모리 영역은 크기가 정해져 있지 않고 필요한 시점에 동적으로 확보한다. )
3. @7103 및 @7104에 각각 a 와 b 라는 프로퍼티 이름을 지정. ( @5001의 변수 영역의 안)
4. 데이터 영역에 숫자 1 을 검색한다. 검색 결과가 없으므로 임의로 @5003에 저장하고, 이 주소를 @7103 에 저장.
5. 위와 같이 문자열 ‘bbb’ 를 임의로 @5004 에 저장하고, 이 주소를 @7104 에 저장한다.
여기서 알 수 잇는 참조형 데이터와 기본형 데이터의 차이는 ‘객체의 변수(프로퍼티) 영역'이 별도로 존재한다는 점이다.
데이터 영역에 저장된 값은 모두 불변값 이지만, 그 변수에는 다른 값을 얼마든지 대입할 수 있다. 이 부분 때문에 흔히 참조형 데이터는 불변(immutable) 하지 않다 === mutable 라고 하는것이다.
여기서, 기본형 (원시형) 데이터 타입과 참조형 데이터 타입의 가장 큰 차이점을 알 수 있다.
let a = 10;
let b = a;
let obj1 = { c: 10, d: 'ddd' };
let obj2 = obj1;
b = 15;
obj2.c = 20;
console.log('a', a); // a 10
console.log('b', b); // b 15
// 원시 데이터 타입은 b 에 재할당을 해줘도 다른 주소값을 바라보고 있으니 a 의 값은 변하지 않는다.
console.log('obj1', obj1); // obj1 { c: 20, d: 'ddd' }
console.log('obj2', obj2); // obj2 { c: 20, d: 'ddd' }
/* 참조형 데이터 타입에서 obj2.c 에 재할당을 해주면
obj1 과 obj2 는 여전히 같은 객체를 ( 같은 주소에서 ) 바라보고 있으니
obj2.c 의 재할당이 obj1 에도 영향을 끼친다. */
console.log(a !== b); // true
console.log(obj1 === obj2); // true
// 두 객체간의 비교는 깊은 복사, 얕은 복사 에 대해 알아보면 더 깊게 알 수 있다.
보통 자바스크립트는 ‘기본형은 값을 복사하고 참조형은 주소값 복사한다' 라고 알고있지만, 어떤 데이터 타입이든 변수에 할당하기 위해서는 주소값을 복사하기 때문에 엄밀히 말하자면 자바스크립트의 모든 데이터 타입은 참조형 데이터 일 수 밖에 없다 하지만, 기본형(원시형)은 주소값을 복사하는 과정이 한번만 이루어 지고, 참조형은 한단계를 더 거치게 된다는것에 차이가 있습니다.
가비지 컬렉팅 (Garbage collecting) : 말 그대로 쓰레기를 수거하는 것이다. 런타임 환경에서 특정 시점이나 메모리 사용량이 포화 상태에 임박할 때마다 자동으로 수거 대상들을 수거 하고, 수거된 메모리는 다시 새로운 값을 할당할 수 있는 빈 공간이 된다
