JavaScript - #4. 데이터 타입 (1)

 

오늘 알아볼 내용은 JavaScript의 데이터 타입이다.

 

ES6 이후 기준 JavaScript는 총 7개의 데이터 타입을 가진다.

 

• JavaScript Data Type

구분	데이터 타입	설명
원시타입	숫자 타입 (number)	숫자를 나타내며, 정수와 실수 구분없이 하나의 숫자 타입만 존재 (처리는 실수로)
	문자열 타입 (string)	문자를 나타냄
	불리언 타입 (boolean)	논리적 참(true), 거짓(false)
	undefined 타입	var 키워드로 선언된 변수에 변수 호이스팅으로 초기화 되는 값
	null 타입	값이 없다는 것을 의도적으로 명시할 때 사용하는 값
	심볼 타입 (symbol)	ES6에서 추가된 타입으로 변경 불가능한 원시 타입의 값
객체타입		객체, 함수, 배열 등

각각의 타입들을 확인해 보겠다.

---

• 숫자 타입

숫자타입은 C언어나 자바등 다른 언어와는 다르게 하나의 숫자타입만 존재한다.

따라서 숫자를 처리할 때 JavaScript는 정수든 실수 든 모두 실수로 처리한다고 한다.

(ECMAScript 사양에 따르면 숫자타입의 값은 배정밀도 64비트 부동소수점 형식을 따른다.)

//숫자타입
var integer = 10; //정수
var double = 10.12; //실수
var negative = -20; //음의 정수

var binary = 0b01000001; //2진수
var octal = 0o101; //8진수
var hex = 0x41; //16진수

console.log(binary); //65
console.log(octal); //65
console.log(hex); //65

값을 2진수, 8진수, 16진수로 표현하여 저장을 해도 JavaScript에서는 이를 각각의 진수로 변환하는 데이터타입이 없기 때문에 참조할때는 10진수로 해석된다. (모두 같은 값이다.)

//숫자타입은 소수로 처리된다.
console.log(1===1.0);//true
console.log(4/2); //2
console.log(3/2); //1.5

또한 숫자타입은 소수로 처리 되기 때문에 정수와 소수의 연산이 모두 가능하다.

//64bit 부동소수점 형식의 한계
console.log(0.3===0.1+0.2); //false

하지만 위와 같은 오류를 보이기도 한다.

오류가 발생하는 이유는 64bit 부동소수점 형식의 한계로 소수의 2진수로 변환과정에서 표현 자리수를 넘어가기 때문에 오차가 발생한다. 이를 해결하기 위해서는 Math.round 등의 함수를 이용하면 되겠다.

//숫자타입의 특별한 값
console.log(10/0); //infinity
console.log(10/-0); //infinity
console.log(1*'string'); //NaN(Not a Number의 약자)

숫자는 특별한 3가지의 값을 표현이 가능하다.

Infinity : 양의 무한대

-Infinity : 음의 무한대

NaN : Not a Number, 산술 연산 불가

---

• 문자열 타입

문자열 타입은 텍스트 데이터를 나타내는데 사용한다. 

문자열 표기하는 방법은 3가지가 있다.

(' ') : 작은따옴표

(" ") : 큰따옴표

(` `) : 백틱, (키보트 느낌표 왼쪽에 있다.)

//문자열타입
console.log('작은 따옴표 문자열');
console.log("큰 따옴표 문자열");
console.log(`백틱 문자열`);

실행결과는 같은 것을 확인할 수 있다.

표기법이 3개가 있다는 각각의 필요성도 있을 것이다.

다음 코드를 확인해보자.

console.log('작은 따옴표 문자열 안에 "큰 따옴표"'); //작은 따옴표 문자열 안에 "큰 따옴표"
console.log("큰 따옴표 문자열 안에 '작은 따옴표'"); //큰 따옴표 문자열 안에 '작은 따옴표'

문자열 내에 따옴표를 사용하고 싶을 때 큰따옴표와 작은따옴표의 교차 사용이 가능하다.

 

그렇다면 백틱(` `)은 언제 사용하는가?

console.log(`저는
백틱입니다.`);

위 코드의 실행결과이다.

백틱은 두개의 따옴표와 다르게 줄바꿈이 가능하다.

물론 따옴표 내에서도 줄바꿈이 가능하기도 하다. 단 이스케이프 시퀀스를 사용해야한다.

console.log('나도 \n줄바꿀 수 있어');

실행 결과를 확인해보자.

(\n)을 사용하니 줄이 바뀌었다. 하지만 무엇을 입력하는 것보다 백틱을 사용하는 것이 더욱 편하지 않을까라는 생각이다.

 

방금사용한 (\n)과 같이 문자열을 처리하는데 기능을 제공하는 것을 이스케이프 시퀀스라고 하며 다양한 종류가 있다.

이스케이프 시퀀스	의미
\0	Null
\b	백스페이스
\f	폼피드 : 프린터로 출력할 경우 다음 페이지의 시작지점으로 이동한다.
\n	줄바꿈
\r	맨 처음으로 커서 이동
\t	탭 (수평)
\v	탭 (수직)
\uXXXX	유니코드
\'	작은따옴표
\"	큰따옴표
\\	백슬래시

문자열을 사용할 때 필요한 부분을 적절히 사용하면 되겠다.

 

추가로 앞으로 유용하게 사용할 백틱의 기능이 있다

let number = 10;
console.log(`나는 표현식도 출력할수 있어 ${number}`); //나는 표현식도 출력할수 있어 10 
console.log(`나는 표현식도 출력할수 있어 ${10+20}`); //나는 표현식도 출력할수 있어 30
let user = "Kim";
console.log(`내 이름은 ${user} 이야`); //내 이름은 Kim 이야

다음과 같이 $(달러기호)와 중괄호({ })를 사용하여 표현식의 값을 문자열에서 나타낼 수 있다.

표현식의 값은 자동으로 문자열화 된다.