자바스크립트 초보자들이 자주하는 실수

개요

최신 자바스크립트나 리액트를 공부하다가 초심자들이 의외로 많은 시간을 까먹으면서 헤매는 부분이 있다. 바로 템플릿 문자열 이다.

비교

일반적으로 자바스크립트에서 문자열을 합칠 때는 아래와 같은 방법을 써왔다. (varA와 varB는 변수 또는 상수다.)

# 전통적인 방법
console.log(varA + "is an " + varB)

# 새로운 방법 (템플릿 문자열)
console.log(`${varA} is an ${varB}`)

헤매는 부분

새로운 방법은 $표시와 함께 중괄호를 사용해 변수 또는 상수를 불러다 표시하고 있다. 이때 분명히 모든 것을 똑같이 타이핑했는데도 동작하지 않는다면 백틱을 홑따옴표로 착각해 타이핑했기 때문일 가능성이 높다. console.log 안의 ‘와 ` 를 잘 보자. 둘은 완전히 다르며 백틱을 쓰지 않으면 그 안의 값이 그대로 문자열로 표시된다.