1장 데이터 타입
1. JavaScript Data Type
1) Pimitive type
: number, string, boolean, null, undefined, symbol(ES6)
2) Reference type
: object, array, function, date, RegExp 등
2. 데이터 타입 배경지식
1) 메모리와 데이터
- 비트(bit) : 0 또는 1만 표현 할 수 있는 하나의 메모리 조각
- 바이트(byte) : 1바이트는 8비트로 구성
C/C++, 자바 등 정적 타입 언어는 메모리 낭비 최소화를 위해 데이터 타입별로 할당할 메모리 영역을 2바이트, 4바이트로 나누어 정해놓았다.
하지만 메모리 용량이 커진 후 등장한 JavaScript는 상대적으로 메모리 관리 압박에서 자유로워 졌다. 숫자는 정수형/부동소수형 구분 없이 64비트 즉, 8바이트를 확보한다.
각 비트는 고유한 식별자를 가진다. 바이트 역시 시작하는 비트의 식별자로 위치를 파악할 수 있다. 모든 데이터는 바이트 단위의 식별자, 더 정확하게는 메모리의 주솟값(memory address)을 통해 서로 구분하고 연결 가능하다.
2) 식별자와 변수
- 변수(variable) : 변할 수 있는 수. 반드시 숫자일 필요는 없다. 변하는 무언가를 뜻하며 데이터(data)를 의미한다.
- 식별자(identifier) : 어떤 데이터를 식별하는 데 사용되는 이름인 변수명을 의미한다.
3. [기본형] 변수 선언과 데이터 할당
var a;
a = '123';
var a = '456';변수는 변경 가능한 데이터가 담길 수 있는 공간이다.
- 메모리 변수 영역에 빈 공간(@2000) 확보한다.
- 확보한 공간의 식별자는 a이다.
- 데이터 영역의 빈 공간(@1000)에 '123' 저장한다.
- 변수 영역에서 a라는 식별자를 검색(@2000)한다.
- 데이터 영역에 저장된 '123'의 주소(@1000)를 변수 영역의 식별자의 값으로 대입한다.
- 데이터 영역에 '456' 있는지 확인한다.
- 없으면 데이터 영역의 빈 공간(@1001)에 '456' 저장한다.
- 변수 영역에서 식별자 a의 값을 @1000 대신 @1001을 대입한다.
=> primitive type의 메모리 저장 방식이다.
4. [참조형] 변수 선언과 데이터 할당
참조형 데이터의 할당
const obj = {
a : 'apple',
b : [1, 2, 3]
};<편의상 가정>
- 변수 영역 : @1000~
- 데이터 영역 : @2000~
- 객체 obj의 값의 변수영역(참조형 데이터가 중첩되어 있기 때문) : @3000~
- 배열의 변수 영역 : @4000~
- @1000에는 이름: obj, 값: @2000
- obj는 참조형 데이터이기 때문에 @2000의 데이터에는 @3001~?가 들어간다.
- @3001 이름: a, 값: @2001(데이터 영역에 'apple'이 있는 곳)
@3002 이름: b, 값: @4000~?(배열이기 때문) - @4000, @4001, @4002 : 각 이름은 인덱스, 값은 데이터 영역의 주소가 들어간다. 데이터 영역의 @2002가 4, @2003이 5, @2004가 6이라면 각 데이터영역의 주소가 @4000~@4001까지의 값으로 들어갈 것이다.
5. 불변값과 가변값
1) 변수와 상수
: 둘을 구분하는 것은 '변경 가능성'이다.
단, 이는 불변성과 구분되어야 하는 용어이다.
변수와 상수를 구분 짓는 변경 가능성의 대상 : 변수 영역 메모리
불변성 여부를 구분 할 때의 변경 가능성의 대상 : 데이터 영역 메모리
2) 불변값과 가변값
기본형 데이터는 모두 불변값이다.
참조형 데이터는 모두 가변값이다.
참조형 데이터의 변수 영역에 데이터 할당을 보면 기본형 데이터와의 차이는 객체의 변수(프로퍼티) 영역이 별도로 존재한다는 것이다.
그러나 객체가 별도로 할애한 영역은 변수의 영역이고 데이터는 기존의 데이터 영역의 메모리를 활용한다. 데이터 영역에 저장된 값은 모두 불변값이라는 것이다.
하지만 변수에는 다른 값을 얼마든지 대입할 수 있닫. 이 이유 때문에 참조형 데이터는 가변값이라고 한다.
참조 카운트 : 어떤 데이터에 대해 자신의 주소를 참조하는 변수의 개수이다.
참조 카운트가 0인 메모리 주소는 가비지 컬렉터(Garbage collector, GC)의 수거 대상이 된다. 가비지 컬렉터는 런타임 환경에 따라 특정 시점 또는 메모리 사용량이 포화 상태에 임박할 때마다 자동으로 수거 대상을 수거한다!(collecting)
수거된 메모리는 새로운 값을 할당 할 수 있는 빈 공간이 된다.
3) 불변 객체
참조형 데이터가 가변값일 때 가변은 참조형 데이터 그 자체의 변경이 아닌 그 내부의 프로퍼티를 변경할 때만 성립된다.
즉, 참조형 데이터를 불변 객체로 만들고자 한 다면 내부 프로퍼티를 변경할 필요가 있을 때마다 매번 새로운 객체를 만들어 할당하면 참조형 데이터도 불변성을 확보 할 수 있다!
4) 얕은 복사와 깊은 복사
const user = {
name : 'winney',
link : {
blog : 'blog',
git : 'git',
email : 'email',
}
}얕은 복사(shallow copy) : 바로 아래 단계의 값만 복사하는 방법
깊은 복사(deep copy) : 내부의 모든 값들을 하나하나 찾아서 전부 복사 하는 방법
깊은 복사를 하지 않을 경우 원본과 사본이 모두 동일한 참조형 데이터의 주소를 갖게 되어 사본이 바뀌면 원본이 바뀌고 원본이 바뀌면 사본이 바뀌기 때문에 깊은 복사를 해야 이와 같은 문제가 발생하지 않는다.
6. null과 undefined
- null : 없음
- undefined : 아직 값이 존재하지 않음
null은 비어 있다는 의미
배열 메서드의 대상에서 제외된다!!
undefined는 그냥 빈 공간이다.
최근 읽고 있는 코어 자바스크립트의 데이터 타입 파트를 아주 짧게 복습용으로 작성해보았다.
한 줄 한 줄 뜯어보면서 읽으니 시간은 오래 걸렸지만 어떤 이유에서 참조형 데이터가 가변성을 가진다고 하는지 왜 기본형 데이터가 불변값이지 그런 부분까지 이해가 되어서 굉장히 읽는 재미가 있었다.
또한 얕은 복사와 깊은 복사가 무슨 의미인지도 정확하게 알 수 있었다.
머리 속에서 정리되지 않은 용어들도 명확하게 알 수 있었다.
코어 자바스크립트의 내용을 당장 100% 이해 할 거라고 생각하지는 않지만 읽어보며 50%의 이해라도 가지고 갈 수 있다면 큰 자산이 되지 않을까 싶다.
