“복잡한 것을 단순하게 해주는"
개인적으로 코딩의 매력 중 하나는 복잡한 것을 단순하게 표현하는 데 있다는 생각을 합니다. 왜 시작부터 이런 말씀을 드리냐면, 템플릿 리터럴(template literals)이 복잡한 것을 좀 더 단순하게 만들어주는 기능을 가지고 있기 때문입니다.
본격적으로 문자열을 배우다 보니 문자열(string)과 변수(variable)를 합치는 일이 굉장히 번거롭게 느껴졌습니다. 예를 들어볼께요.
let hour = 1;
let minute = 2;
let second = 3;
let timeAlert = '지금은 ' + hour + '시 ' + minute + '분 ' + second + '초 입니다.'; timeAlert 변수에는 “지금은 1시 2분 3초 입니다.” 라는 문장이 할당되어 있습니다. 시/분/초 를 다 변수로 선언해 활용했기 때문에 시간이 바뀐다 해도 매번 문장을 수정할 필요가 없겠죠.
문제는 불필요하게 플러스 기호와 작은 따옴표(혹은 큰 따옴표)가 많이 사용된다는 겁니다. 보기에도 참 복잡하죠.
템플릿 리터럴을 활용한다면 어떨까요? timeAlert 부분만 템플릿 리터럴을 활용해 다시 한 번 작성해보겠습니다.
let timeAlert = `지금은 ${hour}시 ${minute}분 ${second}초 입니다.`아까보다 훨씬 정돈되어 보이지 않나요? 게다가 변수가 어디에 들어가있는지가 좀 더 명확하게 보이는 것 같습니다. 이처럼 템플릿 리터럴은 읽기 쉬운 문법으로 코드를 작성할 수 있도록 도와줍니다.
사용법은 간단합니다. 백틱(`) 기호를 기존의 작은 따옴표(혹은 큰 따옴표) 대신 활용하고, 표현식(expression)을 ${} 으로 감싸주면 됩니다.
이 외에도 문장이 길어 행을 나누어줘야 할 때, 개행문자(\n) 의 첨가 없이 쓰는 모양 그대로 행을 나누어주는 등 템플릿 리터럴의 다른 효과가 있으니 관심있으신 분은 아래 링크를 확인하시면 되겠습니다.
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Template_literals
참고로 백틱 문자는 키보드의 탭키 위에 있는데요. 맥북에서는 키보드를 영어로 바꿔줘야 백틱 문자를 사용할 수 있습니다.
언제나 그렇듯 이제 막 배워가기 시작한 초짜이기 때문에 여기 있는 정보들은 참고 정도로 확인해주시고, 위 링크에서처럼 정확한 정보는 공식 문서를 통해 더 자세하게 챙겨가시기를 바랍니다.
