Javascript: 초보자를 위한 템플릿 리터럴 & 태그 기능

JavaScript: Template Literals & Tag Functions for Beginners

출처 : codeburst.io, Brandon Morelli

해당 내용은 Brandon Morelli의 article을 개인적으로 번역한 내용이며, 잘못 번역된 부분이 있을 수 있습니다. 원문은 위에 적힌 주소에서 확인하실 수 있습니다.

 

대부분의 사람들이 그러는 것처럼 나는 click-bait title들을 싫어한다. 하지만 진지하게 "당신 코드의 가독성을 즉시 높여줄 간단한 한가지 트릭"이라는 제목을 사용하겠다.

 

Back-tick은 당신의 친구입니다.

 

템플릿 리터럴은 작은 따옴표( ' )나 따옴표( " ) 대신 back-tick( ` )을 사용한다.

console.log(`Hello World`);
// "Hello World"

이것은 좋지 못한 예제이다. 이제 변수에 $ { } 를 추가해보자. 

var name = 'World';
console.log(`Hello ${name}`);

// "Hello World"

좀 더 나아졌다. 

"Template Literal"이 정확이 무엇인가? template은 "preset format" 즉, 미리 만들어진 형식이다. 그리고 literal은 "value written exactly as it's meant to be interpreted" 즉, 번역된 것이라고 여겨지는 value이다. 자바스크립트 형식에서 템플릿 리터럴은 내장된 표현들을 사용하도록 하거나 가독성을 증가시킬 때 string들은 연결시키는 방법 중 하나이다. 

 

 

 

가독성 & 깨끗한 코드

우리가 어떤 사람의 이름이나 별명을 출력하기를 원한다고 가정해보자. 템플릿 리터럴을 사용하는 것은 좀 더 적은 코드뿐 아니라 더 높은 가독성을 의미한다. 

var p = {
  name: 'Jackson',
  nn: 'Jak',
};

// STRING CONCATENATION
console.log('Hi, I\'m ' + p.name + '! Call me "' + p.nn + '".');

// TEMPLATE LITERALS
console.log(`Hi, I'm ${p.name}! Call me "${p.nn}".`);

// "Hi, I'm Jackson! Call me 'Jak'."

이 예제에는 눈에띄는 2가지 연속되는 string들이 있다. apostrophe 대신 back-slash를 사용하고, string끝에 따옴표나 쌍따옴표가 어떤 역할을 하는지 알아보자. 이것들은 template literal로 축약할 수 있고 우리는 더 깔끔한 코드를 짤 수 있다. 

줄바꿈은 template literal와 다른 위치에 넣는다.

// STRING CONCATENATION
console.log("Dear Mom,\n" + 
"Hope you are well.\n" + 
"\tLove, your son")

// TEMPLATE LITERALS
console.log(`Dear Mom,
Hope you are well.
    Love, your son`);

// Dear Mom,
// Hope you are well.
//     Love, your son

 template literal을 사용하면 새로운 줄의 문자나, tabs, spaces 등은 string의 일부가 된다. 이것은 어떤 면에서는 축복이 될 수도 저주가 될 수도 있지만 가독성 측면에서는 분명이 플러스 요인이다. 

 

가독성의 예시를 한가지 더 보자. sting에 표현식을 추가해보자. 

// STRING CONCATENATION
console.log('Three plus six is ' + (3 + 6) + '.');

// TEMPLATE LITERALS
console.log(`Three plus six is ${3 + 6}.`);

// "Three plus six is 9."

 

 

 

 

Tagged Templates

tagged template는 template literal의 또 다른 사용 예시이다. tagged template는 arguments를 가져오는 template literal을 사용하는 함수호출이다. 

// TYPICAL FUNCTION
function greet(){};

// TAG FUNCTION
greet`I'm ${name}. I'm ${age} years old.`

위에서 볼 수 있듯이 태그 함수는 단순히 template literal이 뒤에 오는 함수명이다. 

그러나 태그 함수는 완전한 syntactic sugar ( 기능적으로나 표현적으로는 차이가 없지만 사용자가 읽고 쓰기 편한 형태)이다. 

위 태그 함수는 아래와 같다. 

// TAG FUNCTION
greet`I'm ${name}. I'm ${age} years old.`

// EQUIVALENT FUNCTION
greet(["I'm ", ". I'm ", " years old."], name, age)

위 예시에서 볼 수 있듯이 태그 함수는 template literal을 함수의 argument로 만드는 가장 쉬운 방법이다.  태그함수는 template literal을 argument의 배열로 나눈다. 첫번째 argument는 string value의 배열이 될 것이다. 추가적인 arguments들은 그들이 사용되는 순서에 따라 차례로 변수가 될 것이다. 

아래 코드는 이것에 대한 아주 좋은 예시이다.

var name = 'Brandon';
var age = 26;
 
function greet(){
  console.log(arguments[0]);
  // ["I'm ", ". I'm ", " years old."]
 
  console.log(arguments[1]);
  // Brandon
 
  console.log(arguments[2]);
  // 26
}

greet`I'm ${name}. I'm ${age} years old.`;

위에서 태그 함수는 template literal을 사용하고 나누었다. 그러나 위 예제는 가장 유용한 예제는 아니다. 아래 예제를 확인해보자.

var name = 'Brandon';
var age = 26;

function greet(arr, nameArg, ageArg) {
  console.log(arr[0] + nameArg + arr[1] + ageArg + arr[2]);
}

greet`Woah, ${name} is ${age}?`;
// "Woah, Brandon is 26?"

우리가 great 함수를 호출 했을 때 우리는 template literal을 유일한 argument로 만들었고, 태그함수는 template literal을 세개의 arguments로 나누었다. 첫번째 argument는 plain text의 배열이다. 남은 argument들은 그것들이 나타난 순서대로 template literal 표현식들이다. 그리고 우리는 원하는 thread를 만들기 위해 모든 argument들에 접근하고 나열할 수 있게 된다. 이 예제에서 우리는 배열의 중간에 arguments들을 끼워 넣고 우리가 원할때 text들을 호출할 수 있다.