모던 자바스크립트 Deep Dive

[TIL/모던 자바스크립트 Deep Dive] 2023/03/16

What is template literal?Template Literal은 ES6부터 도입된 새로운 문자열 표기법이다. '멀티라인 문자열(multi-line string)', '표현식 삽입(expression interpolation)', '태그드 탬플릿(tagged

2023년 3월 16일2min read

6장. 데이터 타입(Data Type)

6-3. 템플릿 리터럴(Template Literal)

What is template literal?

Template Literal```은 ES6부터 도입된 ```새로운 문자열 표기법```이다.

'멀티라인 문자열(multi-line string)', '표현식 삽입(expression interpolation)', '태그드 탬플릿(tagged template)' 등 편리한 ```문자열 처리 기능```을 제공한다고 한다. template literal은 runtime에 ```일반 문자열```로 반환되어 처리된다.

멀티라인 문자열(Multi-Line String)

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

말 그대로, SyntaxError가 발생했다. 일반 문자열에서 줄바꿈 등의 공백을 표현하기 위해서는 ``백슬래시(\)`로 시작하는 `이스케이프 시퀀스(escape sequence)``를 사용해야 한다.

일단 딱 봐도 사용하기 싫게 생겼다. 다음은 escape sequence를 사용한 예시이다.

일반 문자열과 달리 template literal 내에서는 escape sequence를 사용하지 않고도 줄바꿈이 허용된다. 동시에 모든 공백도 있는 그대로 적용된다.

표현식 삽입(Expression Interpolation)

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

template literal 내에서는 ``표현식 삽입``을 통해 간단히 문자열을 삽입할 수 있다. 다음은 template literal 내에서의 표현식 삽입에 관한 예시이다.

6-4. 불리언 타입(Boolean Type)

불리언 타입의 값은, 논리적 참 or 거짓을 나타내는 ``true``false`뿐이다. 불리언 타입은 '참과 거짓으로 구분되는 조건에 의해 프로그램의 흐름을 제어하는 `조건문``'에서 자주 사용한다.

6-5. undefined 타입(undefined Type)

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

이전에 학습한대로, var 키워드로 선언한 변수는 암묵적으로 undefined로 초기화된다. 변수 선언에 의해 확보된 메모리 공간을 처음 할당이 이뤄질 때까지 빈 상태로 방치하지 않고, 자바스크립트 엔진이 undefined로 초기화한다. 결과적으로, 변수를 선언한 후 값을 할당하지 않은 변수를 참조하면 undefined가 반환된다는 사실을 알 수 있다.

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

개발자가 변수에 값이 없다는 것을 명시하고 싶을 때에는 undefined를 사용하는 것은 지양해야 한다. undefined의 본래 취지에 어긋날뿐더러 혼란을 야기할 수 있기 때문이다. 이러한 상황에서 변수에 할당하는 것이 바로 ``null``이다.

6-6. null 타입(null Type)

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

null은 앞에서 언급한 대로, 변수에 값이 없다는 것을 ``의도적으로 명시(의도적 부재, intentional absence)``할 때 사용한다.

변수에 null을 할당하는 것은 변수가 이전에 참조하던 값을 더 이상 참조하지 않겠다는 뜻이다. 이전에 할당되어 있던 값에 대한 참조를 명시적으로 제거하는 것을 의미하고, JS엔진은 누구도 참조하지 않는 메모리 공간에 대해 가비지 콜렉션을 수행할 것이다.

함수가 유효한 값을 반환할 수 없는 경우 명시적으로 null을 반환하기도 한다. 다음과 같은 상황이다.