자바스크립트 기본형과 참조형 (feat. 코어 자바스크립트)

JangGwon·2022년 7월 28일

자바스크립트

본 포스팅은 코어 자바스크립트 책을 읽고 정리한 내용입니다.

1. 데이터 타입

자바스크립트 데이터 타입에는 기본형과 참조형으로 나눠진다.
- 기본형에는 Number, String, boolean, null, undefined가 있고 ES6에 추가된 Symbol등이 있다.
- 참조형에는 객체가 있으며, 객체 하위에는 배열, 함수 날짜, 정규 표현식등이 있으며, ES6에 추가된 Map, Set, WeakMap, WeakSet등이 있다.
기본형은 할당이나 연산할시 값이 담긴 주솟값을 복제한다.
참조형은 할당이나 연산할시 값이 담긴 주솟값들로 이루어진 묶음을 가리키는 주솟값을 복제한다.

2. 변수와 식별자

변수
- 변수는 '변할 수 있는 수' 또는 '변할 수 있는 데이터'를 뜻함.
- 변경 가능한 데이터가 담길 수 잇는 공간
식별자는 어떤 데이터를 식별하는데 사용하는 이름, 즉 변수명을 뜻함.

3. 변수 선언과 데이터 할당

변수 선언 과정

var a; // 변할 수 있는 데이터를 만들고, 이 데이터의 식별자는 a로 한다.

사용자가 위와 같은 변수 선언 명령을 받은 컴퓨터는 메모리영역에서 비어있는 공간 하나를 확보하고 그 확보한 공간의 이름(식별자)을 a라고 지정합니다.

주소	...	1002	1003	1004	...
데이터			이름 : a 값 :

추후 사용자가 a에 접근한다면 컴퓨터는 메모리에서 a라는 이름을 가진 주소를 검색해 해당 공간에 담긴 데이터를 반환합니다.

데이터 할당 과정

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

자바스크립트는 변수 'a'의 위치에 'abc'를 직접 저장하지 않는다. 대신 데이터를 저장하기 위한 별도의 메모리 공간을 다시 확보해서 문자열 'abc'를 저장하고 그 주소를 변수 영역에 저장하는 식으로 이뤄진다.

변수 영역

주소	...	1002	1003	1004	...
데이터			이름 : a 값 : @5003

데이터 영역

주소	...	5002	5003	5004	...
데이터			'abc'

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

데이터 변환을 자유롭게 할 수 있게 한다.
메모리를 더욱 효율적으로 관리하기 위해.
자바스크립트의 숫자형 데이터는 8바이트의 공간을 확보하지만, 반면 문자열은 특별히 정해진 규격이 없고. 그 이유는 글자 종류에 따라, 전체 글자 수에 따라 필요한 공간이 가변적이기 때문이다.
만약 미리 확보한 공간내에서 데이터 변환을 진행하게 된다면 변환한 데이터를 다시 저장하기 위해서는 '확보된 공간을 변환된 데이터 크기에 맞게 늘리는 작업'이 선행돼야 하는데, 해당 데이터가 메모리 상의 중간에 있는 상황이라면, 해당 공간보다 뒤에 저자왼 데이터들을 전부 뒤로 옮기고, 이동시킨 주소를 각 식별자에 다시 연결해야하는 불상사를 막기 위해.

즉 효율적으로 문자열 데이터의 변환을 처리하기 위해서는 변수와 데이터를 별도의 공간에 나누어 저장하는것이 최적이다.

만약, 변수 값을 변경한다면 ?

만약 변수의 데이터 값을 변경하게 된다면, 기존 데이터 영역에 저장된 데이터의 값을 변경하는 것이 아닌 새로 만들어 별도의 공간에 저장한다.

var a = 'abc';					// 변수 a를 선언
a = 'abcdef';					// 변수a의 값을 'abcdef'로 변경

변수 영역

주소	...	1002	1003	1004	...
데이터			이름 : a 값 : @5004

데이터 영역

주소	...	5002	5003	5004	...
데이터			'abc'	'abcdef'

(기존 데이터 값이 'abc'일때는 주소 @5003을 연결했지만, 'abcdef'로 변경되었을 경우 'abcdef'가 새로 할당된 @5004와 연결된 예시)
이렇게 한번 만든 값은 바꿀 수 없고 값 변경은 새로 만드는 동작을 통해서 이뤄진다. 이것이 불변값의 성질이며, 한 번 숫자나 문자열로 만들어진 값은 가비지 컬렉팅을 당하지 않는 한 영원히 변하지 않는다.