코어 자바스크립트 - 데이터 타입

 

- 식별자와 변수

보통 변수와 식별를 혼용하는 경우가 많다. 변수는 컴퓨터 용어로 쓸 때는 '변할 수 있는 무언가' 라는 명사로 확장시켰다. 여기서 무언가는 데이터를 말한다.

식별자는 어떤 데이터를 식별하는데 사용하는 이름, 즉 변수명이다.

 

 

 

- 데이터 할당

변수 선언과 데이터 할당에 대한 메모리 영역 변화

var a;
a = 'abc';

var a = 'abc';

변수 영역	주소	1002	1003	1004	1005
	데이터		이름: a 값: @5004
데이터 영역	주소	5002	5003	5004	5005
	데이터			'abc'

 

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

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

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

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

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

 

변수 영역에 값을 직접 대입하지 않고 번거롭게 한 단계를 거치는 이유는

데이터 변환을 자유롭게 할 수 있게 함과 동시에 메모리를 더욱 효율적으로 관리하기 위함.

예를 들어 500개의 변수를 생성해서 모든 변수에 숫자 5를 할당하는 상황일 때, 변수 영역과 데이터 영역을 분리하면 중복된 데이터에 대한 처리 효율이 높아진다.

 

 

 

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

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

 

변수 영역	주소	1001	1002	1003	1004
	데이터		이름: obj1 값: @5001
데이터 영역	주소	5001	5002	5003	5004
	데이터	@7103 ~ ?		1	'bbb'
객체 @5001의 변수 영역	주소	7103	7104	7105	7106
	데이터	이름: a 값: @5003	이름: b 값: @5004

 

1. 변수 영역의 빈 공간(@1002)를 확보하고, 그 주소의 이름을 obj1로 지정

2. 임의의 데이터 저장 공간(@5001)에 데이터를 저장하려고 보니 여러 개의 프로퍼티로 이뤄진 데이터 그룹이다. 이 그룹 내부의 프로퍼티들을 저장하기 위해 별도의 변수 영역을 마련하고, 그 영역의 주소(@7103 ~ ?)를 @5001에 저장

3. @7103 및 @7104에 각각 a와 b라는 프로퍼티 이름을 지정

4. 데이터 영역에서 숫자 1을 검색. 검색 결과가 없으므로 임의로 @5003에 저장하고, 이 주소를 @7103에 저장. 문자열 'bbb' 역시 임의로 @5004에 저장하고, 이 주소를 @7104에 저장

 

 

 

- 변수 복사 비교

var a = 10;
var b = a;

var obj1 = { c: 10, d: 'ddd' };
var obj2 = obj1;

변수 영역	주소	1001	1002	1003	1004
	데이터	이름: a 값: @5001	이름: b 값: @5001	이름: obj1 값: @5002	이름: obj2 값: @5002
데이터 영역	주소	5001	5002	5003	5004
	데이터	10	@7103 ~ ?	'ddd'
객체 @5002의 변수 영역	주소	7103	7104	7105	7106
	데이터	이름: c 값: @5001	이름: d 값: @5003

 

기본형 데이터 복사 부분만 보자. 변수 영역의 빈 공간 @1002를 확보하고 식별자를 b로 지정. 식별자 a를 검색해 그 값을 찾아온다. @1001에 저장된 값인 @5001을 들고 확보해둔 @1002에 값으로 대입.

 

참조형 데이터 복사 부분을 보자. 변수 영역의 빈 공간 @1004를 확보하고 식별자를 obj2로 지정. 이제 식별자 obj1을 검색해(@1003) 그 값인 @5002을 들고, @1004에 값으로 대입.

 

변수를 복사하는 과정은 기본형 데이터와 참조형 데이터 모두 같은 주소를 바라보게 되는 점에서 동일하다.

 

 

 

- 변수 복사 이후 값 변경 결과 비교 - 객체의 프로퍼티 변경 시

var a = 10;
var b = a;
var obj1 = { c: 10, d: 'ddd' };
var obj2 = obj1;

b = 15;
obj2.c = 20;

 

6번째 줄에서 데이터 영역에 15가 없으므로 새로운 공간 @5004에 저장. 그 주소를 든 채로 변수 영역에서 식별자가 b인 주소를 찾는다. @1002의 값은 @5004가 된다.

 

7번째 줄에서는 데이터 영역에 20이 없으므로 새로운 공간 @5005에 저장하고, 그 주소를 든 채로 변수 영역에서 obj2를 찾고(@1004), obj2의 값인 @5002가 가리키는 변수 영역에서 다시 c를 찾아(@7103) 그곳에 @5005를 대입한다.

 

주소	1001	1002	1003	1004	1005
데이터	이름: a 값: @5001	이름: b 값: @5004	이름: obj1 값: @5002	이름: obj2 값: @5002
주소	5001	5002	5003	5004	5005
데이터	10	@7103 ~ ?	'ddd'	15	20
주소	7103	7104
데이터	이름: c 값: @5005	이름: d 값: @5003

 

변수 a와 b는 서로 다른 주소를 바라보게 됐으나, 변수 obj1과 obj2는 여전히 같은 객체를 바라보고 있는 상태이다. 코드로 표현하면,

a !== b
obj1 === obj2

 

이 결과가 바로 기본형과 참조형 데이터의 가장 큰 차이점이다. 어떤 데이터 타입이든 변수에 할당하기 위해서는 주솟값을 복사해야 하기 때문에, 엄밀히 따지면 자바스크립트의 모든 데이터 타입은 참조형 데이터일 수밖에 없다. 다만 기본형은 주솟값을 복사하는 과정이 한 번만 이뤄지고, 참조형은 한 단계를 더 거치게 된다는 차이가 있다.

 

 

 

- 변수 복사 이후 값 변경 결과 비교 - 객체 자체를 변경했을 때

var a = 10;
var b = a;
var obj1 = { c: 10, d: 'ddd' };
var obj2 = obj1;

b = 15;
obj2 = { c: 20, d: 'ddd' };

 

이번에는 b의 경우와 마찬가지로 obj2에도 새로운 객체를 할당함으로써 값을 직접 변경했다. 그러면 메모리의 데이터 영역의 새로운 공간에 새 객체가 저장되고 그 주소를 변수 영역의 obj2 위치에 저장된다. 객체에 대한 변경임에도 값이 달라진다.

즉, 참조형 데이터가 '가변값'이라고 설명할 때의 '가변'은 참조형데이터 자체를 변경할 경우가 아니라 그 내부의 프로퍼티를 변경할 때만 성립된다.

 

 

 

 

추가로 null은 한 가지 주의할 점이 있다. 바로 typeof null이 object라는 점이다. 이는 자바스크립트 자체 버그다.

var n = null;
console.log(typeof n); // object

 

 

 

 

 

 

 

코어 자바스크립트를 읽고 정리한 글입니다.

 

https://product.kyobobook.co.kr/detail/S000001766397

코어 자바스크립트 | 정재남 - 교보문고