[Js] 따옴표(quotes)와 백틱(backtick)의 차이

',"와 `의 차이

자바스크립트 코드를 보다 보면 따옴표와 백틱을 많이 보게 된다.
따옴표 하고 백틱을 언제 사용해야 하고 차이는 무엇일까?

보통 스트링(String) 값을 선언할 때 따옴표를 아래와 같이 많이 쓴다.
( 백틱은 숫자 1번 왼쪽 물결 표시 키이다 )

// 큰 따옴표
let temp = "Hello World"
// 작은 따옴표
let temp2 = 'Hello World'
// 백틱
let temp3 = `Hello World`

위의 코드에서는 큰 따옴표, 작은따옴표로 스트링 값을 선언한 것인데 JS에서는 차이가 없다.
그럼 `(backtick)백틱은 차이가 있을까?

백틱

백틱의 경우 ${}를 통해 변수를 넣어 사용할 수 있는데 이를 템플릿 리터럴이라 부른다. ( ES6 이후 )
한번 아래 코드를 확인해보자

let score = 100;
console.log(`내점수는 ${score}점!!`);

 콘솔로 내 점수를 찍는다고 가정했을 때 백틱안에 ${변수}를 사용해서 작성 시 내점수는 100점!! 이 출력되는 것을 확인할 수 있다. 만약 이 코드를 출력하기 위해 따옴표를 사용했다면 아래와 같이 사용된다.

let score = 100;
console.log("내점수는 " + score +"점!!");

이런 식으로 따옴표를 사용했을 때에는 + 를 통해 코드를 작성해야 한다. 백틱이 더 간단하게 표현할 수 있다는 것을 확인할 수 있다. 

단순히 변수를 ${}를 통해 표현시킬 수도 있지만, ${} 내에서 연산또한 가능하다.
아래는 연산에 대한 코드이다

let a = 10;
let b = 5;
console.log(`${a+b}를 만들라면 요로케 하세요`);
// 15를 만들라면 요로케 하세요

위의 코드와 같이 * / + - 연산이 ${}내에서 가능하다

또한 템플릿 리터럴에서는 따옴표에서 사용하는 \n (줄 바꿈)은 템플릿 리터럴의 일부가 되어 동작한다.
아래의 줄바꿈 예시를 보자

// 위는 코드 아래는 출력
let quotes = "따옴표의 줄바꿈은 \n요론식";
console.log(quotes);
// 따옴표의 줄바꿈은 
// 요론식

let backtick = `백틱의 줄바꿈은
요론식`;
console.log(backtick);
// 백틱의 줄바꿈은
// 요론식

코드와 같이 따옴표의 경우는 \n를 통해 줄 바꿈을 진행하며, 백틱은 실제 줄바꿈을 통해 줄바꿈을 인식시킬 수 있다.

예시로 JS에서 HTML 코드를 작성해서 삽입시키는 코드가 있다고 생각해보자
백틱을 사용해서 HTMl코드를 작성하면 id 값이나 class값을 ${}를 통해 쉽게 js변수 삽입이 가능하며 줄 바꿈 또한 쉽게 진행할 수 있다.

백틱에 대한 좀 더 상세한 내용은 아래의 링크를 통해 확인할 수 있다.
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Template_literals