[모던 자바스크립트 딥다이브]_데이터 타입 어디까지 보고 오셨어요?

데이터 타입의 종류

구분	데이터 타입	설명
원시타입	숫자 타입	숫자, 정수와 실수 구분 없이 하나의 숫자 타입만 존재
	문자열 타입	문자열
	불리언 타입	논리적 참, 거짓
	undefinded 타입	자바스크립트에서 암묵적으로 할당하는 초기 값
	null 타입	값이 없음을 의도하고 명시할 때 사용하는 값
	심벌 타입	ES6에서 추가된  7번째 타입
	+ Bigint 타입	ES11에서 추가된 8번째 타입
객체타입		객체, 함수, 배열...

데이터 타입의 종류는 위의 표 에서 보이는 것처럼 분류를 해 놓았습니다.

그럼 우리는 왜 이렇게 데이터 타입을 나눠놓아야 할까요?

우리가 수학문제를 풀 때 를 생각해보시기 바랍니다.

우리가 연산을 위해 사용한 수 1은 숫자로 인식될 것입니다.

그리고 때때로 사용하는 하나, 첫번째 와 같이 의미를 가지는 문자들은 따로 사용을 하게 되는데요,

이처럼 데이터 값으로 사용되는 1도 여러가지 데이터 타입이 될 수 있습니다.

타입을 바꿔 표현해줌으로써 의미도 부여되고 컴퓨터가 인식할 수 있게 되는 것이죠.

즉, 새로운 의미를 부여하거나, 컴퓨터가 알맞은 메모리를 할당할 수 있도록 돕는 것입니다.

---

숫자 타입

다른 프로그래밍 언어에서는 정수와 실수를 구분해서 사용하고는 합니다.

하지만 자바스크립트는 독특하게 실수 하나만 존재합니다.

쉽게 말하면 실수는 소수점 이하가 있는 숫자입니다.

배정밀도 64비트 부동소수점 형식을 따릅니다.

배정밀도를 쉽게 말하면, 소수점 이하의 15자리로 숫자를 표현한다는 것입니다.

부동소수점이란 쉽게 말하면 점을 이동하면서 숫자를 근삿값으로 표현하는 것을 말합니다.

(자세한 내용은 고정소수점과 함께 나중에 따로 다뤄보고 배워보겠습니다!)

참고로, 단정밀도라는 것도 있으며, 32비트로 표현되며, 소수점 이하의 7자리로 숫자를 표현합니다.

 

자바스크립트에서는 정수를 위한 데이터 타입이 따로 존재하지  않기 때문에

정수와 정수를 더한 값도 실수일 수 있습니다.

하지만 오해하면 안되는 것은 정수라는 데이터를 처리하지 못한다는 것은 아닙니다.

다양한 메소드를 이용해 다양한 정수, 실수 등 데이터들을 처리할 수 있습니다.

 

숫자를 표현하는 방법에는 여러가지 방법이 존재합니다.

정수, 실수, 2진수, 8진수, 16진수가 있지만 모두 64비트 배정밀도 부동소수점 형식의 2진수로 저장이 됩니다.

그리고 이들을 참조하면, 우리 인간에게 가장 보기 편한 10진수로 표현됩니다.

 

숫자 타입은 세가지 특별한 값도 표현할 수 있습니다.

• Infinity : 양의 무한대
• -Infinity : 음의 무한대
• NaN : 산술 연산 불가 (Not a Number)

NaN은 말그대로 숫자가 아닌 값입니다.
따라서 연산자를 통해 계산을 할 수 없는 값입니다.

---

문자열 타입

문자열은 작은따옴표 , 큰따옴표 또는 백틱으로 텍스트를 감싸며 사용할 수 있습니다.

작은따옴표를 사용할지, 큰따옴표를 사용할지는 여러분의 취향에 따라 사용하시면 됩니다.

다만 하나를 정하고 사용해야 개발 중 혼란을 막을 수 있습니다.

const foo = 'Hello' // 작은따옴표로 문자열 감싸기

const bar = "world!" // 큰따옴표로 문자열 감싸기

console.log(foo, bar) // Hello world!

 

그렇다면 백틱은 뭘까요?

ES6부터 템플릿 리터럴이라는 새로운 문자열 표기법이 도입되었습니다.

원래라면 일반 문자열에서는 일정개수 이상의 공백과, 줄바꿈은 인식되지 않습니다.

만약 일반 문자열 속에서 공백이나 줄바꿈을 표현하려면 이스케이프 시퀀스를 사용해야 했습니다.

이스케이프 시퀀스	내용
\0	Null
\b	백스페이스
\f	프린터로 출력할 경우 다음페이지의 시작지점으로 이동합니다.
\n	다음 행으로 이동합니다.
\r	다음행으로 커서를 처음으로 이동합니다.
\t	수평 탭
\v	수직 탭
\uxxxx	유니코드(x의 자리에 코드번호를 입력하면 됩니다.)

하지만 템플릿 리터럴에서는 이와 같이 이스케이프 시퀀스를 사용하지 않고도 줄바꿈과 공백이 그대로 적용 됩니다.

또한 표현식을 삽입하여 문자열을 나타낼 수 있습니다.

const greeting = 'Nice to meet you!'
const name = 'fill-jung'

console.log(`${greeting} I'm ${name}`) // Nice to meet you! I'm fill-jung

$ 달러 사인과 {} 중괄호를 사용하여 표현식을 삽입할 수 있습니다.

이때는 표현식이 문자열로 암묵적으로 변환되어 삽입됩니다.

참고로 백틱은 작은따옴표와 헷갈릴 수 있습니다.

'작은따옴표' // 보통 엔터가 있는 자리에서 왼쪽을 보면 존재합니다.

`백틱` // 물결기호 키와 함께 있는 경우가 있습니다.

---

불리언 타입

불리언 타입의 값은 논리적인 참과 거짓을 나타내는 값입니다.

console.log(1+1==2) // true
console.log(2-1==5) // false

---

undefined 타입

var 키워드로 변수를 선언하면 undefined값으로 암묵적으로 할당이 되고 초기화 됩니다.

우리가 어떤 변수를 참조했을 때 undefined값이 나온다면,

그 변수는 할당된적이 없는 초기화 되지않은 변수라는 것을 알 수 있습니다.

undefined라는 단어 그대로 풀이를 하면 '정의되지 않은' 입니다.

그리고 정의란 변수에 값을 할당하여 변수가 무엇인지 명시하는 것을 말합니다.

다른 언어에서는 선언과 정의를 엄격히 분리하여 사용합니다.

선언과 정의를 메모리 주소를 할당하는지 여부로 구분합니다.

컴파일러에게 존재를 알리면 선언, 나아가 변수와 메모리 주소가 연결되면 정의

하지만 자바스크립트에서는 선언이 되면, 이후에 암묵적으로 undefined라는 값이 정의되므로 구분이 모호해 집니다.

따라서 앞으로는 변수는 선언, 함수는 정의로 표현하겠습니다.

(함수는 왜 정의 인가? 변수는 메모리 할당에 중점을 둔다면, 함수는 기능 명시에 중점을 두기 때문입니다.)

---

null 타입

자바스크립트는 대소문자를 구분하기 때문에 null과 NULL, Null등의 문자와는 다릅니다.

null은 의도적으로 변수에 값이 없음을 명시하기 위해 사용하는 값입니다.

변수에 null을 할당하는 것은 변수가 이전에 참조했던 값을 더 이상 참조하지 않겠다는 의미입니다.

즉, 참조된 값을 지워주는 것을 말하며, 자바스크립트는 이 메모리 공간에 대해 가비지 콜렉션을 수행하게 됩니다.

---

심벌 타입

심벌은 ES6에서 추가된 데이터 타입입니다.

심벌 값은 다른 값과 중복 되지 않는 유일무이한 값입니다.

심벌 이외의 원시 값은 리터럴을 통해 생성되지만, 심벌은 Symbol 함수를 통해 생성됩니다.

이후에 심벌에 대해서 자세히 다뤄보겠습니다!

---

bigint 타입

bigint타입은 숫자값을 안정적으로 나타낼 수 있는 최대치인 2의 53승 -1 보다 큰 정수를 표현할 수 있는 새로운 원시값입니다.

53..한눈에 봐도 불편한 숫자죠?

이렇게 불편한 숫자가 나왔다는 것은 그 뒤 배경이 항상 숨어 있습니다.

원래는 64비트로 부호비트, 지수비트, 가수비트로 나눠지며

가수비트가 정수를 표현하고 53비트로 이루어져 있기 때문입니다.😮‍💨

---

객체 타입

자바스크립트는 사실 객체 기반 언어이기 때문에 자바스크립트를 이루는 대부분은 객체입니다.

따라서 이전 7가지의 원시타입을 제외하면 모두 객체 타입입니다.

---

동적 타이핑

정적타입 언어와 동적타입 언어가 있습니다.

C, 자바 와 같은 언어가 정적타입 언어라고 할 수 있습니다.

자바스크립트, 파이썬, PHP와 같은 언어가 동적타입 언어입니다.

 

그렇다면 둘의 차이가 뭘까요?

간단히 설명하면 값과 변수의 관계입니다.

변수에 값을 할당할때,

값의 타입에 의해 변수의 타입도 결정되면 동적

이미 변수의 타입이 정해지고 값이 할당되면 정적

이렇게 보면 되겠습니다!

 

// Java
char foo // 1바이트 정수타입의 값만 할당할 수 있습니다.

int bar // 4바이트 정수 타입의 값만 할당할 수 있습니다.

//Javascript
var foo;

foo = 12
console.log(typeof foo) // number

foo = 'yes'
console.log(typeof foo) // string