• Chapter 06 데이터 타입

• 숫자 타입

  자바스크립트는 2진수, 8진수, 16진수를 표현하기 위한 데이터 타입을 제공하지 않기 때문에 이들 값을 참조하면 모두 10진수로 해석된다.

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

// 표기법만 다를 뿐 모두 같은 값이다.
console.log(binary); 
console.log(octal);
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

자바스크립트는 대소문자를 구별하는 언어이므로 NaN을 다르게 표현하면 값이 아닌 식별자로 해석한다.

var x = nan; //ReferenceError: nan is not defined

• 문자열 타입

  문자열은 작은따옴표(''), 큰따옴표("") 또는 백틱(``)으로 텍스트를 감싼다.
  자바스크립트에서 가장 일반적으로 사용하는 것은 작은따옴표다.

var string;
string = '문자열';
string = "문자열";
string = `문자열`;
// 세 가지 모두 문자열이다.
string ='작은따옴표로 감싼 문자열 내의 "큰따옴표"는 문자열로 인식된다';
string = "큰따옴표로 감싼 문자열 내의 '작은따옴표'는 문자열로 인식된다";

C는 문자열 타입을 제공하지 않고 문자의 배열로 문자열을 표현한다.
JAVA는 문자열을 객체로 표현한다.
Javascript의 문자열은 원시 타입이며 변경 불가능한 값(immutablevalue)이다.
문자열이 생성되면 그 문자열을 변경할 수 없다. 책에서는 11장에서 다룬다고 한다.

• 템플릿 리터럴

  ES6부터 템플릿 리터럴이라는 새로운 문자열 표기법이 도입되었다.
  ES란, ECMAScript의 약자이며 자바스크립트의 표준, 규격을 나타내는 용어이다.
  템플릿 리터럴은 일반 문자열과 차이가 없어 보이지만 작은따옴표 또는 큰따옴표 대신 백틱(``)을 사용한다.

var str = 'Hello'
world.';
// > SyntaxError: Invalid or unexpected token

위 예제를 살펴보면 줄바꿈을 사용했지만 일반적인 문자열 내에서는 줄바꿈(개행)이 허용되지 않는다.
따라서 일반 문자열에서 줄바꿈을 사용하려면 백슬래시로 시작하는 이스케이프 시퀀스를 사용해야 한다.

이스케이프 시퀀스를 사용해 줄바꿈과 들여쓰기를한 HTML 예제는 다음과 같다.

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>`;

복잡해보이던 코드가 템플릿 리터럴을 활용하니 한 눈에 알아볼 수 있게 바뀌었다.

• 표현식 삽입

  문자열은 문자열 연산자인 +를 사용해 연결할 수 있다. + 연산자는 피연산자 중 하나 이상이 문자열인 경우 문자열 연결 연산자로 동작한다. 그 외의 경우는 덧셈 연산자로 동작한다.

var first = 'Hyeon-gyu';
var last = 'Kim';

console.log('My name is ' + first + ' ' + last + '.'); 
// My name is Hyeon-gyu Kim.

템플릿 리터럴 내에서는 표현식 삽입을 통해 간단히 문자열을 삽입할 수 있다. 이를 통해 문자열 연산자보다
가독성이 좋고 간편하게 문자열을 조합할 수 있다.

var name = 'Hyeongyu';
var age = 23;

console.log(`My name is ${name} and my age is ${age}.`); 
// My name is Hyeongyu and my age is 23.

${}으로 표현식을 감싸서 표현식을 삽입하는 방법도 있다. 이때 표현식의 평가 결과가 문자열이 아니더라도
문자열로 타입이 변환되어 삽입된다.

console.log(`1 + 2 = ${1+2}`); // 1 + 2 = 3
console.log('1 + 2 = ${1+2}'); // 1 + 2 = ${1+2}

표현식 삽입은 템플릿 리터럴 내에서만 사용해야 한다. 템플릿 리터럴이 아닌 일반 문자열에서 표현식을 삽입하면 문자열로 취급된다.

이웅모.2006.모던 자바스크립트 Deep Dive.위키북스