Quick JavaScript (3) Template Literal 과 Symbol

1. Template Literal

 

ES6 에서 도입된 template literals 은 치환, 확장이 가능한 문자열이다.

예제를 통해 기억해 두자.

` (back tick 혹은 grave accent) 로 감싼 문자열 내부에서는 shell 처럼 ${ } 를 이용해서 확장이 가능하다.   

 

$ 을 템플릿 리터럴에서 표현하고 싶으면 이스케이프 시키면 된다.

`\${mathtrauma}`

 

템플릿 리터럴은 여러 행에 걸친 문장을 표현할 때도 직관적으로 사용할 수 있다. 

세 개의 행을 출력해보자. 작은 따옴표나 큰 따옴표로 감싼 경우에

//console.log('line 1\nline 2\nline 3');

console.log('line 1\n'+
'line 2\n'+
'line 3');

 

로 해야한다. 주석 처리된 부분도 같은 일을 하지만 알아보기 힘들다.

한편 백틱(back tick) 을 사용한 템플릿 리터럴은 보이는 대로 처리한다.

console.log(`line1
line2
line3`);

 

Tagged templates

다음 코드는 'intro' 라는 tag 를 붙인 템플릿의 사용례를 보여준다.

함수명이자 문자열의 tag 인 intro 는 확장될 자리에 들어갈 것들을 변수처럼 취급해서 parsing을 해준다.

 

결과는 다음과 같다.

 

함수이면서 동시에 tag 이기에 괄호없이 intro 에 문자열을 붙여 쓴 것을 기억해두자.

(JavaScript 외울 것이 너무 많아 졌다.)

 

 

primitive type 중에서 다음으로 소개할 것은...

2. Symbols

 

symbol 은 고유한 값를 만들기 위해 사용되거나(예를 들면 '고객 고유 번호' 같은 것을 생성할 때)

고유한 키를 생성할 때 사용된다는데...

뭐, 고유한 값을 만드니까 매 호출마다 다른 값을 만들 것이다.

 console.log(Symbol('test')===Symbol('test'));
 //false

 

Literal form 이 없는 유일한 primitive type 이다. (용도를 생각해보면 당연하다.)

const uniqueId=Symbol('Test!');

new 를 사용하지 않고 만들었음에 유의하자.

Symbol 은 만들어지면 '전역 레지스트리(global symbol registry)'에 저장된다. 

 

 

Symbol.for('desc') 를 사용해서  'desc' 문자열을 위한 symbol 을 만들 수 있다.

이 경우는 몇 번을 해도 같은 값을 되돌려준다.

 

Symbol.for('mathtrauma')===Symbol.for('mathtrauma');
//true

 

최근 Symbol 을 사용한 라이브러리들을 보고 있는데 왜 필요한지 아직 가슴에 와닿지는 않는다.

추후에 공부를 더 하고 보충해야겠다.