자바스크립트 문자열, single or double quotes?... and backtick

내 경우에는 보통 문자열에 shift누르기 귀찮기도 하고 보기에도 깔끔해보여서 single quotes을 쓰는 편인데, 다른사람들은 어떻게 쓰는지 궁금해서 검색해보았다.

 

자바에서는 char타입은 ''로 감싸고 String타입은 ""로 감싸지만, 자바스크립트는 char타입이 없기 때문에 문자열을 표현할때 'ABC'와 "ABC"는 완전히 같다. 내가 single quotes를 쓰는 이유는 단순히 매번 shift랑 같이 누르는것이 귀찮기 때문이다. html 요소 코드에서 escape가 필요할 때는 아래처럼 single qoutes안에 double quotes을 써주는 편이다.

 

const element = '<div class="wrapper">...</div>'

 

postman에서 ajax요청할 때 json파일도 같이 보낼 때가 있는데, json은 double quotes만 가능해서 무의식적으로 single quotes으로 쓰다가 고친적이 몇 번있다. 넘나귀찮... 사실은 이 글을 작성하게된 계기도 single quotes로 작성한 json파일을 수정하다가 갑자기 다른 사람들은 어떤 것을 더 많이 쓰고있는지 궁금해서 검색해보게되었다.

 

검색해보니 감사하게도 어떤 블로그에 정리된 글이있었다. 유명한 자바스크립트 프로젝트에서 single quotes를 사용한 비율을 아래와 같이 표로 보여주었다.

 

Project Dominant quote style

async	' - 76% of quotes
express	' - 92% of quotes
lodash	' - 73% of quotes
request	' - 97% of quotes
underscore	' - 78% of quotes
angular.js	' - 58% of quotes
react	' - 52% of quotes

 

프론트앤드 프로젝트에서는 다른 프로젝트들보다는  double quote가 더 많이 쓰인 것을 알 수 있는데, 아마 HTML 요소때문일 것이다.

재밌는건 아래의 스타일 가이드들은 single quotes 와 double quotes가 섞여있는 것을 알 수 있다.

 

• gjslint (Google Closure Linter) favors ' single quotes
• standard (an NPM package), favors ' single quotes
• jslint favors " double quotes by default
• eslint favors " double quotes by default
• TypeScript Contributors Coding Guidelines favor " double quotes

이제는 ES6 backtick의 등장으로 수고스러움을 많이 줄이게되어  정말 좋은 것 같다. 특히 코드가 보기에도 굉장히 깔끔한게 마음에 든다.

원문 블로그의 댓글을 보니 나처럼 shift키 누르기가 귀찮아서 사람들이 single quotes를 쓰는 것이 주된 이유인 것 같고, 두번째 이유는 SQL문을 쓸 때 double quotes를 허용하지 않기 때문인것으로 보였다. 

 

또 재밌는건, 모든 string에 backtick을 쓰면 어떠냐고 묻는 글이 있었는데 답변으로 `hello my name is ${name}`이런식으로 문장사이에 직접 변수를 넣는 interpolation이 필요한 것이 아니라면 backtick은 속도를 느리게하기 때문에 쓰지 않는 것이 좋다는 댓글이 있었다. 그런데 그뒤에 다시 대댓글로 벤치 마크해보니 backtick이나 single quotes, double quotes 성능은 모두 동일하다고 달려있었다. 흥미돋...🤔

 

그래서 정말로 backtick은 quotes에 비해 성능이 느린지 다시 검색해보았다. 결과는 굉장히 의외였다.

 

아래의 "Hello world!"라는 문자열과 빈 문자열을 기준으로 성능을 비교해보면 어떤 결과가 나올까?

const Hello = "Hello world!"; //double quotes
const Hello = 'Hello world!'; //single quotes
const Hello = `Hello world!`; //backticks

const empty = "";
const empty = '';
const empty = ``;

 

의외로 두 경우 모두 성능이 가장 빠른건 backtick을 사용했을 때였다! 적어도 성능이 비슷한 정도인줄알았는데...신기하다.

 

 

그렇다면 +를 사용한 문자열 합치기와 ${variable}을 사용한 문자열 합치기 중 더 빠른 것은 무엇일까?

//concatenation
const world = "world!";
const merged = "Hello " + world;
console.log(merged);

//interpolation
const world = "world!";
const merged = `Hello ${world}`;
console.log(merged);

더 빠른 것은...두구두구... 바로 +를 사용한 문자열 합치기가 더 빨랐다! 🎉

하지만 비록 backtick이 더 느리긴해도 backtick이 주는 가독성과 깔끔한 코드를 포기할 만큼의 큰 성능차이는 아니였다.

 

결론

원글쓴이도 아무리 backtick이 성능이 느리거나 quotes에 비해 빠르다고해도 매우 근소한 차이일 뿐이며, 측정오류에 포함되는 수치이기 때문에 그렇게 유의미하다고 볼 수도없다고 말한다. 그렇기 때문에 backtick이 성능이 느리다는 것은 myth에 가까울 뿐이며, 설령 느릴지라도 그 차이는 interpolation이나 multi-line string에서 주는 이점을 포기할만큼 크지 않다고 주장한다.

 

나도 이 말에 동의한다. 성능차가 프로젝트에 지대한 영향을 끼칠 정도로 크지도 않을 뿐더러 오히려 가독성과 깔끔한 코드를 작성할 수 있다는 점에서 굉장한 이점을 가지고 있기 때문이다. 어쨌든 차이가 크지 않으니까 일관되고 깔끔한 코드를 쓰는게 더 중요하지 않을까? 라는 생각이 들었다.

 

아무튼 단순한 궁금증에서 출발한 검색이었는데 삼천포로 빠진 것 같지만 나름 재밌었다ㅋㅋㅋ

 

 

원문 보기

Should I use 'single' or "double-quotes" for strings in JavaScript

Are backticks (``) slower than other strings in JavaScript?