[모던자바스크립트] 6장 데이터 타입

 

5장에서 얘기가 나온듯이 메모리안에 "값"을 넣는데 그 값이 데이터타입에 따라 숫자가 될지 문자가 될지 정해진다.

 

그 "데이터 타입"에 대해 알아보자.

 

값을 종류 "데이터 타입"

 

 

• 자바스크립트의 모든 값은 데이터 타입을 갖는다 ES6는 7가지의 데이터 타입을 제공한다.
• 원시 타입과 객체타입으로 나뉘어진다.

 

1.  숫자 타입

 

C나 Java에서는 정수(int/long), 실수(float/doubl)를 자료형을 제공한다. 하지만 자바스크립트는 숫자타입만을 제공한다.

 

ECMAScript 사양을 따르면 모든 수를 실수로 처리하고 정수만 표현하기 위한 데이터 타입이 별도로 존재하지 않는다 

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

 

위 코드 모두 숫자타입이다.

정수, 실수, 2진수, 8진수, 16진수 리터럴은 모두 메모리에 배정밀도 64비트 부동소수점형식의 2진수로 저장된다.

또한 숫자타입 값은 모두 10진수로 해석된다.

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

// 표기법만 다를 뿐 모두 같은 값이다.
console.log(binary); //65
console.log(octal); //65
console.log(hex); //65
console.log(binary === octal) //true
console.log(octal === hex) // true

• 자바스크립트는 정수타입을 따로 제공하지 않기에 모든 숫자타입 값은 실수로 처리한다.
• 정수로 표시해도 사실 실수라는 것을 의미한다.
• 따라서 정수로 표시되는 수끼리 나누더라도 실수가 나올 수 있다.

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

숫자 타입은 추가적으로 세 가지 특별한 값도 표현할 수 있다.

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

//숫자 타입의 세 가지 특별한 값
console.log(10 / 0); //Infinity
console.log(10 / -0); //-Infinity
console.log(1 * 'String'); //NaN

2. 문자열 타입

 

• 텍스트 데이터를 나타내는데 사용
• 문자열은 작은따옴표(''), 큰따옴표(""), 백틱으로 텍스트를 감싼다.

var string;
string = '문자열';
stirng = "문자열";
stirng = `문자열`;//(ES6부터 지원)
string = '작은따옴표로 감싼 문자열 내의 "큰따옴표"는 문자열로 인식된다.'
string = "큰따옴표로 감싼 문자열 내의 '작은따옴표'는 문자열로 인식된다."

 

문자열을 따옴표로 감싸는 이유는 키워드나 식별자 같은 토큰과 구분하기 위해서다.
또한 따옴표로 문자열을 감싸지 않는다면 자바스크립트 엔진은 키워드나 식별자 같은 토큰으로 인식하여 공백문자도 포함할 수 없다.

var string = hello;//ReferenceError: hello is not defined
var string2 = hello world; // hello라는 식별자와 world라는 식별자를 나열한 것으로 문법에러

 

C언어에서는 문자열은 문자의 배열료 표현하고, Java에서는 객체로 표현한다. 하지만 자바스크립트의 문자열은 원시타입이며 변경 불가능한 값 이다.

3. 템플릿 리터널

ES6부터 템플릿 리터널이라고 새로운 문자열 표기법을 도입.

 

• 멀티라인 문자열
• 표현식 삽입
• 태크드 템플릿

(중요) 템플릿 리터널은 따옴표를 쓰지않고 백틱을 이용한다 (``)

 

멀티라인 문자열

일반 문자열 내에서는 줄바꿈이 허용되지 않는다.

var str = 'hello
world';
// SyntaxError : Invalid or unexpected token

 

따라서 일반 문자열 내에서 줄바꿈 등의 공백을 표현하려면 줄바꿈 문자 \n, 탭 \t 등의 이스케이프 시퀀스를 사용해야한다.

var template = '<ul>\n\t<li><a href="#">Home</a></li>\n</ul>';
console.log(template);

위 코드의 출력 결과는 다음과 같다.

<ul>
	<li><a href="#">Home</a></li>
<ul>

 

 

 

 

일반 문자열과 달리 템플릿 리터럴을 사용하면 이스케이프 시퀀스를 사용하지 않아도 위와 같은 출력 결과를 얻을 수 있다.

var template = `<ul>
	<li><a href="#">Home</a></li>
</ul>`;
console.log(template);

 

표현식 삽입

 

문자열 중에서 특정 내용만 변수처리를 하고 싶을 때 사용할 수 있다. ES5스팩 까지는 해당 기능이 제공되지 않아 문자열 연결 연산자를 사용해 이를 출력하였다.

var first = 'Ung-mo';
var last = 'Lee';

//ES5: 문자열 연결
console.log('My name is ' + first + ' ' + last + '.'); //My name is Ung-mo Lee.

템플릿 리터럴 내에서 표현식 삽입을 통해서 간단하게 동일한 내용을 출력할 수 있다. 이는 문자열 연산자보다 가독성도 뛰어나다.

var first = 'Ung-mo';
var last = 'Lee';

// ES6: 표현식 삽입
console.log(`My name is ${first} ${last}.`); // My name is Ung-mo Lee.

• 표현식을 삽입하려면 ${}으로 표현식을 감싼다.
• 이때 표현식의 평가 결과가 문자열이 아니더라도 타입이 문자열로 강제 변환되어 삽입된다.
• 표현식 삽입은 반드시 템플릿 리터럴 내에서 사용 해야한다. 그렇지 않으면 일반 문자열로 취급한다.

console.log(`1+2=${1+2}`); //백틱을 사용하여 1 + 2 = 3
console.log("1+2=${1+2}"); // 일반문자열로 보기에 1 + 2 = ${1 + 2}로 취급

4. 불리언 타입

• 논리적 참, 거짓을 나타내는 true와 false뿐

var foo = true;
console.log(foo); //true

foo = false;
console.log(foo); //false

5. undefinded 타입

undefined 타입의 값은 undefined가 유일하다.

이전 챕터에서 살펴보았듯, var 키워드로 선언한 변수는 암묵적으로 undefined로 초기회 된다.

 

변수선언에 의해 확보된 메모리공간에 처음 할당이 이뤄지기 전까지 비 상태로 안두려고  undefined로 초기화 한다.

따라서 변수를 선언하고 아무런 할당없이 해당 변수를 참조하면 undefined가 반환된다.

var foo;
console.log(foo); //undefined

 

undefined를 직접 할당하는 것은 권장하지 않는다. undefined는 자바스크립트 엔진이 변수를 초기화 할때 사용하는 값이므로 이를 통해서 어떤 변수를 참조할 때 undefined가 반환된다면 선언 후 한번도 할당되지 않았다는 것을 알 수 있다.

 

이것이 undefined의 본래 취지이며 이를 임의로 사용하는 것은 좋지 않다.

만약 변수에 값이 비어있다는 것을 의미하고 싶다면 null을 할당하면 된다.

6. null 타입

null 타입의 값은 null이 유일하다.

 

프로그래밍 언어에서는 null을 변수에 값이 없다는 것을 의도적으로 명시할 때 사용한다.

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

 

*이전에 할당된 값에 대한 참조를  명시적으로 제거 한다고 보면 된다 

var foo = 'Lee';

// 이전 참조를 제거. foo 변수는 더이상 'Lee'를 참조하지 않는다.
// javascript는 C언어 처럼 메모리를 개발자가 직접 관리하지 않기 때문에 
// null을 할당한다고 곧바로 foo에 할당되어있던 'Lee'의 메모리가 릴리즈 되지는 않는다.
// 이는 가비지컬랙터의 동작에 대한 이해가 필요하다.
foo = null;

또한 함수가 유효한 값을 반환할 수 없는 경우 명시적으로 null을 반환하기도 한다.

7. 심벌 타입 

ES6 스팩에서 추가된 7번째 타입으로, 변경이 불가능한 원시 타입의 값이다.

 

• 심벌 값은 다른 값과 중복되지 않는 유일무이한 값이다.
• 따라서 주로 객체의 프로퍼티 키로 사용한다.
• 키 값으로 심벌 타입의 값을 사용하면 키가 충돌할 일이 없어진다.

심벌을 제외하곤 원시 값은  리터럴(기호나 숫자 표기)을 통해 값을 생성하지만 심벌은 symbol함수를 호출해 생성한다.

이 값은 외부에 노출이 안되고 유일무이하다.

var key = Symbol('key');
console.log(typeof key); // Symbol

//객체 생성
var obj = {};

// 이름이 충돌되지 않도록 심볼을 프로퍼티 키로 사용한다.
obj[key] = 'value';
console.log(obj[key]); // value

8. 객체 타입

자바스크립트를 이루고 있는 것들은 거의 다 객체이다 지금껏 알아본 6가지 데이터타입 이외에는 몸두 객체 타입이다.