[JavaScript] 데이터 타입 - 템플릿 리터럴, 불리언 타입, undefined 타입

템플릿 리터럴

ES6부터 템플릿 리터럴(template literal)이라고 하는 새로운 문자열 표기법이 도입되었다.

템플릿 리터럴은 런타임에 일반 문자열로 변환되어 처리된다.

백틱(` `)을 사용한다.

 

var str = `Template literal`;
console.log(str); // Template literal

 

멀티라인 문자열

일반 문자열 내에선 줄바꿈(개행)이 허용되지 않는다.

일반 문자열 내에서 줄바꿈 등의 공백을 표현하려면 백슬래시(\)로 시작하는 이스케이프 시퀀스(escape sequence)를 사용해야 한다.

 

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

 

 

템플릿 리터럴 내에서는 이스케이프 시퀀스를 사용하지 않고도 줄바꿈이 허용되며, 모든 공백도 있는 그대로 적용된다.

 

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

 

 

표현식 삽입

문자열은 문자열 연산사 +를 사용해 연결할 수 있다.

+ 연산자는 피연산 중 하나 이상이 문자열인 경우 문자열 연결 연산자로 동작한다. 그 외의 경우는 덧셈 연산자로 동작한다.

 

var first = 'Nana';
var last = 'Kim';

// ES5 의 문자열 연결
console.log('My name is ' + first + ' ' + last + '.'); // My name is Nana Kim.

 

템플릿 리터럴 내에서는 표현식 삽입(expression interpolation)을 통해 간단히 문자열을 삽입할 수 있다.

 

var first = 'Nana';
var last = 'Kim';

// ES6 의 문자열 연결
console.log(`My name is ${first} ${last}.`); // My name is Nana Kim.

 

표현식을 삽입하기 위해서 ${ } 으로 표현식을 감싸면 된다.

표현식의 평가 결과가 문자열이 아니더라도 문자열로 타입이 강제로 변환되어 삽입된다.

 

불리언 타입

불리언 타입의 값은 논리적 참, 거짓을 나타내는 true와 false 뿐이다.

 

undefined 타입

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

var 키워드로 선언한 변수는 암묵적으로 undefined로 초기화횐다.

변수를 선언한 이후 값을 할당하지 않은 변수를 참조하면 undefined가 반환된다.

 

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

 

undefined는 개발자가 의도적으로 할당한 값이 아니라 자바스크립트 엔진이 변수를 초기화 할 때 사용하는 값이다.

변수를 참조했을 때 undefined가 반환된다면 참조한 변수가 선언 이후 값이 할당된 적이 없는, 초기화되지 않은 변수라는 것이다.

=> 변수에 값이 없다는 것을 명시하고 싶을 때는 undefined가 아닌 null 을 할당할 것

 

퀴즈

- 일반 문자열 내에선 줄바꿈(개행)이 허용된다. (O, X)

정답: X

 

일반 문자열 내에선 줄바꿈(개행)이 허용되지 않는다.

일반 문자열 내에서 줄바꿈 등의 공백을 표현하려면 백슬래시(\)로 시작하는 이스케이프 시퀀스(escape sequence)를 사용해야 한다.

 

- 변수를 선언한 이후 값을 할당하지 않은 변수를 참조하면 (                  )가 반환된다.

정답: undefined

 

var 키워드로 선언한 변수는 암묵적으로 undefined로 초기화횐다.
변수를 선언한 이후 값을 할당하지 않은 변수를 참조하면 undefined가 반환된다.