[JS] 백틱과 ${...}

자료 출처 - 모던 JavaScript 튜토리얼

백틱❓ 🤔

백틱은 ` 흔히 사용하는 '과는 다른 친구이다. 이 친구다. 자바스크립트를 처음 배우는 사람들을 혼란스럽게 하는 친구다. 분명 예시로 올라온 코드를 똑같이 썼는데 안 된다. 하면 이 친구 문제일 확률이 좀 있다.

velog를 쓰다보면 자주 사용하는데

Something Something을 쓸 때도 사용되고

let something;
const somesomething;

와 같이 코드를 쓸 때도 사용된다.

개인적으로는 맥북을 쓸 때 한글로는 백틱이 안나와서 약간 짜증나는 친구다.

그런데 백틱은 왜❓

자바스크립트 공부를 하다가 백틱을 보게 되었는데 정확한 원리를 모르고 있었어서 기록하려고 글을 썼다.

let name = "yeonseong";

console.log(`hello ${name}`);

자바스크립트에서 위와 같은 방식으로 백틱을 쓰게 된다. ${...}과 결합해서 쓴다. 위의 출력 결과는 hello yeonseong일 것이다. + 기호를 쓰고 따옴표를 열었다 닫았다 하지 않아도 되어서 아주 편하게 쓸 수 있다.

뭐가 나올까❓

console.log(`hello ${"name"}`);

console.log(`hello ${1}`);

백틱을 항상 변수의 이름을 써서 사용하다 보니 위와 같은 구문에서 뭐가 나올지 예상이 안되었다. 문제를 보았을때 "name"에서는 뭔가 모르게 hello name이 출력되지 않을까? 하는 생각이 들었지만 확신이 없었고 1은 따옴표도 없어서 변수 이름으로 인식되면 undefine? null? 뭐가 출력되지 하는 생각을 가지고 있었다.

사실 백틱은...

위의 결과 값은 아래와 같다.

• hello name
• hello 1

약간 허무한 생각이 들었다. 그런데 원리가 무엇일까? 사실 백틱은, 더 정확히는 백틱과 ${...} 구문은 ... 안에 든 구문을 문자열로 반환한다. 변수랑만 쓸 수 있는게 아니다.

글을 다 쓰고 나니 근데 변수랑 안 쓸거면 쓸 필요가 있나...라는 생각이 들었다. 그래서 변수랑 쓰는 예제만 보았나 보다.

➕11월 25일 추가

console.log(`hello ${1}`);

• 위의 결과가 "hello 1"이 나오는 이유는 1은 식별자가 될 수 없기 때문이다.
• 식별자 네이밍 규칙에 의해 식별자는 숫자로 시작할 수 없다.
• 따라서 1은 리터럴로 평가되어 1이 (문자열로 변환되어) 출력된다.

console.log(`hello ${name}`);

• 위의 결과는 브라우저 콘솔에서는 hello가 나오고 undefined가 나온다.
• Node 환경에서는 name is not defined 에러가 나온다.