# 데이터 타입

자바스크립트 - Javascript

 

자바스크립트의 자료형이라는건 많이 들어봤는데 데이터 타입이라고 하니까 못알아 들었던 저같은 분들이 또 계실까요..?

자바스크립트의 데이터 타입 = 자바스크립트의 자료형 두개는 서로 같은 말이었습니다👏🏻👏🏻👏🏻

이렇게 자바스크립트를 주언어로 사용하고 있으면서도 얕게만 알고 있는거같아 심도있게 공부해야 할 필요성을 연차가 어느정도 쌓이기 시작하니 느끼게 됐어요 ㅎㅎ

마침 팀원들중에 저와 뜻이 같은 분들이 계셔 함께 자바스크립트 스터디를 꾸리게 되었어요 !

지금부터 차근차근 함께 스터디했던 내용을 공유하도록 할게요 : )

 

---

 

데이터 타입의 종류

원시타입 : 값이 담긴주소값을 바로 복제

 

• Boolean
• Null
• Undefined
• 숫자 (Number)
• 문자열 (String)
• Symbol (ES6에서 추가됨)

 

참조타입 : 값이 담긴주소값들로 이루어진 묶음을 가리키는 주소값을 복제

 

• 객체 (Object)
  • 배열 (Array)
  • 함수 (Function)
  • 정규표현식 (RegExp)
  • Map (ES6에서 추가됨)
  • WeekMap (ES6에서 추가됨)
  • Set (ES6에서 추가됨)
  • WeekSet (ES6에서 추가됨)

/* 원시타입 */


var primitiveType = 'red'; 

// color에 primitiveType을 할당 함으로써 primitiveType의 값인 red가 바로 복제

var color = primitiveType; 

console.log( color ); // red



/* 참조타입 */


var referenceType = { name : joan, age : 12 };

// obj에 주소값들로 이우러진 묶음의 주소값인 referenceType을 복제

var obj = referenceType;

console.log( obj ); // { name : joan, age : 12 }

 

 

데이터 타입에 관한 배경지식

• 메모리 : 매우 많은 비트(bit)들로 구성
• 비트 (bit) : 0 또는 1 로만 표현 할 수 있는 하나의 메모리 조각, 각 비트는 고유한 식별자를 통해 위치 확인
• 바이트 (byte) : 표현 가능한 개수에 어느정도 제약이 따르더라도 적정공간을 묶어 효율적으로 제공 [ 1byte = 8bit ]

 

비트와 바이트 - bit & byte

 

 

자바스크립트는 메모리 용량이 과거보다 월등히 커진 상황에서 등장하였습니다.

따라서 메모리 공간을 좀 더 넉넉히 할당하여 8비트가 아닌 64비트(8바이트)를 확보합니다.

그덕에 개발자는 메모리 관리에 대한 압박에서 자유로워지고 형변환을 걱정해야 하는 상황이 덜 발생하게 되었습니다.

 

• 변수 : 변할 수 있는 수, 데이터
• 식별자 : 데이터를 식별하는데 사용하는 이름, 변수명

 

 

 

변수 선언과 데이터 할당

변수 선언의 동작 원리

/* 변수 선언 */

var a;

 

데이터의 식별자가 a인 변할 수 있는 데이터를 만들었습니다.

이렇게 변수를 선언함으로써 메모리 영역에선 어떠한 작업이 일어나는지 그림을 통해 확인해 보도록 하겠습니다.

 

변수 선언에 대한 메모리 영역의 변화

 

데이터의 식별자가 a인 변할 수 있는 데이터를 만들겠다는 명령을 받은 컴퓨터는 메모리에서 비어있는 공간 하나를 확보한 후 해당 공간의 이름(식별자)을 a라고 지정합니다.

변수 선언이 이루어지고 난 이후에 사용자가 a에 접근하고자 하면 컴퓨터는 메모리에서 a라는 이름을 가진 주소를 검색해 해당 공간에 담긴 데이터를 반환하는 방식으로 동작하는 것입니다.

 

 

데이터 할당

/* 변수 선언 */

var a;


/* 데이터 할당 */

a = 'abc';


/* 변수 선언과 데이터 할당을 한문장으로 표현 */

var a = 'abc';

할당 과정을 통해 a라는 이름을 가진 주소를 검색해서 그곳에 문자열 'abc'를 할당하게 됩니다.

이때, 컴퓨터는 해당 공간에 문자열 'abc'를 직접 저장하는것이 아니라 데이터를 저장하기 위한 별도의 메모리 공간을 확보해 문자열 'abc'를 저장하고, 그 주소를 변수 영역에 저장하는 식으로 이루어지게 됩니다.

데이터를 할당 했을 때에 메모리 영역에선 어떠한 작업이 일어나는지 그림을 통해 확인해 보도록 하겠습니다.

 

데이터 할당에 대한 메모리 영역의 변화

 

1. 변수 영역에서 빈 공간을 확보한다.
2. 확보한 공간의 식별자를 a로 지정한다.
3. 데이터 영역의 빈 공간에 문자열 'abc'를 저장한다.
4. 변수 영역에서 a라는 식별자를 검색한다.
5. 저장한 문자열의 주소를 식별자가 a인 공간에 대입한다.

 

그렇다면 왜 변수 영역에 값을 직접 넣지 않고 번거롭게 데이터 영역에 값을 저장하고 데이터 영역에 선언된 주소를 변수 영역에 대입하는 과정을 거치는것일까요?

이는 데이터 변환을 자유롭게 할 뿐 아니라 메모리를 더욱 효율적으로 관리하기 때문입니다.

컴퓨터는 변환된 데이터를 다시 저장하기 위해서 확보된 공간을 변환된 데이터 크기에 맞게 늘리거나 줄이는 작업을 거쳐야 합니다.

마지막에 있는 데이터를 변환한다고 하면 메모리상의 가장 마지막에 있던 데이터만 변환하면 되니까 어렵지 않겠지만 중간에 있는 데이터를 변환해야할 경우 해당 공간보다 뒤에 있는 데이터들은 중간에 변환된 데이터 크기에 맞게 모두 이동시킨 후 이동 시킨 주소를 각 식별자에 다시 연결해줘야 하는 작업을 거치기 때문에 컴퓨터가 처리해야 할 연산이 많아질 수 밖에 없습니다.

따라서 효율적인 데이터 변환을 처리하기 위해서 변수와 데이터를 별도의 공간에 나누어 저장하게 된것입니다.

 

문자열 변환에 대한 메모리 영역의 변화

 

또한 변수 영역과 데이터 영역을 분리하면 데이터 영역에 저장된 값은 같은 값에 대한 처리가 있을 시 해당 값이 담겨있는 주소만 변수 영역에 연결 해 주면 되기때문에 중복된 데이터에 대한 처리 효율이 높아집니다.

 

 

 

원시타입 데이터와 참조타입 데이터

불변값

: 숫자, 문자열, boolean, null, undefined, Symbol (= 원시타입 데이터)

 

변수(variable) : 바꿀 수 O - 변수 영역 메모리에 데이터 할당이 이루어 진 후 변수 공간에 다른 데이터를 재할당 할 수 O

상수(const) : 바꿀 수 X - 변수 영역 메모리에 데이터 할당이 이루어 진 후 변수 공간에 다른 데이터를 재할당 할 수 X

 

하지만 이때 불변값과 상수를 같은 개념으로 오해하면 안됩니다.불변성 여부를 구분할 때의 변경 가능성의 대상은 데이터 영역 메모리 이기 때문입니다.

 

/* 불변성 */


// 기존의 'abc'가 'abcdef'로 바뀌는 것이 아니라

// 새로운 문자열 'abcdef'를 만들어 해당 주소를 변수 a에 저장

var a = 'abc';

a = a + 'def';



// 변수 b에 숫자 5를 할당

// 변수 c에 숫자 5를 할당, 이미 데이터 영역에 만들어 놓은 숫자 5를 가진 값이 있으니 해당 주소를 재활용

// 기존에 저장된 5를 7로 바꾸는것이 아니라 7을 가진 새로운 데이터 영역을 만들어 해당 주소를 변수 b에 저장

var b = 5;

var c = 5;

b = 7;

 

문자열 값도 한번 만든 값은 바꿀 수 없고, 숫자 값도 다른 값으로 변경 할 수 없습니다.

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

변경은 오직 데이터 영역에 값이 없을 경우 새로 만드는 동작을 통해서만 이루어지게 됩니다.

이것이 바로 불변값의 성질이 되겠습니다.

 

 

가변값

: 참조타입 데이터

 

/* 참조타입 데이터 할당 */

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

 

참조형 데이터의 할당

 

1. 변수 영역의 빈공간을 확보한다.
2. 확보한 공간의 식별자를 obj1로 지정한다.
3. 데이터 영역의 빈공간에 데이터를 저장하려고 보니 여러개의 프로퍼티로 이뤄진 데이터 그룹의 형태이다.
4. 그룹 내부의 프로퍼티를 저장하기 위해 별도의 변수 영역을 마련한다.
5. 별도의 변수 영역의 빈공간을 확보하여 해당 공간의 주소를 데이터 영역의 빈공간에 저장한다.
6. 별도의 변수 영역에 확보한 공간의 식별자를 각각 a와 b로 지정한다.
7. 데이터 영역에 a 와 b에 선언한 값이 있는지를 찾고 없으면 데이터 영역의 빈공간에 값을 새롭게 저장한다.
8. 저장된 데이터 영역의 주소를 별도의 변수 영역의 식별자가 일치하는 공간에 지정한다.

 

원시타입 데이터와의 차이점은 객체의 변수 영역이 별도로 존재한다는 점입니다.

객체의 변수 영역은 또 다른 변수 영역일 뿐 데이터 영역은 기존의 메모리 공간을 그대로 활용하게 됩니다.

이때 데이터 영역에 저장된 값은 모두 불변값이지만 변수 영역에는 다른 값을 얼마든지 대입해도 무방합니다.

따라서 일반적으로 참조타입 데이터는 가변값이다 라고 정의하게 되는것입니다.

 

---

 

Update 내역

2020/10/21 - 원시타입 데이터와 참조타입 데이터

2020/10/19 - 변수 선언과 데이터 할당

2020/10/16 - 데이터 타입의 종류, 데이터 타입에 관한 배경지식

 

 

---