[JS] '' vs "" vs `` 무엇을 쓸까?

문자열

• 자바스크립트에서는 다른 프로그래밍 언어와 달리 문자열이 원시 타입의 값이다.
  C언어에서는 문자열은 문자의 배열로 Java에서는 문자열이 객체이다.
• 문자열이 원시 타입의 값이라는 것은 장점과 단점이 있다.
  C언어와 Java를 만든 사람들이 문자열을 문자의 배열과 객체로 만든 이유가 있다.
• 숫자 987654321과 1은 같은 메모리를 차지한다.
• 문자열 "987654321"과 "1" 다른 메모리를 차지한다.
• 문자열이 원시타입이라는 것은 메모리의 효율성과 개발자의 편의성을 trade off 한 것이다.

문자열 표기 방법

• 문자열은 다른 타입의 값과 달리 "",'', 혹은 백틱(`)으로 감싸 표현한다.

let str = "abc";
let str = abc;

• 문자열의 값을 감싸지 않는다면 자바스크립트 엔진은 문자열의 값이 아닌 식별자 혹은 키워드로 인식한다.
• 식별자/키워드와 구분하기 위해 따옴표 혹은 백틱으로 감싸준다.

표기 방법의 차이

프론트엔드 개발자(자바스크립트 개발자)는 어떤 문자열 표기 방법을 사용하는 것이 효율적일까? 🤔

• 변하지 않는 명제는 통일된 방법을 사용하라는 것이다.
• ""을 쓰다가 ''을 쓰다가 하는 것이 가장 안 좋다.

그렇다면 둘 중 어떤 것을 쓰는게 더 좋을까? 위의 질문을 답하기 위해 우선 ""과 ''도 문자열로 사용된다는 것을 이해할 필요가 있다.

I'm front-end developer

• 위와 같은 문장에서 '가 쓰인다. 문자열에서 따옴표를 쓰기 위해서는 escape charecter를 사용하여야 한다.
• 좀 더 가독성이 좋은 방법으로 서로 다른 따옴표로 감싸는 방법이 있다.

let str = "I'm front-end developer";

• 작은 따옴표를 큰 따옴표로 감싸면 작은 따옴표는 문자로 인식된다.
  반대도 마찬가지다.

효율적인 표기법 ?

• 결론적으로 작은 따옴표를 문자로 많이 쓰면 큰 따옴표로 감싸는 것이 효율적이고 큰 따옴표를 문자로 많이 쓰면 작은 따옴표로 감싸는 것이 효율적이다.
• 프론트엔드 개발자는 둘 중 어느것을 쓸 일이 많을까?
• 프론트엔드 개발자는 html을 쓸 일이 많을 것이다.

<h1 class="title">

• 위와 같은 문장을 많이 접하는데 html의 대부분 attribute는 큰 따옴표로 감싸는 것이 관례이다.

결론

• html에는 큰 따옴표가 많이 나오기 때문에 해당 요소를 문자열로 가져오려면 작은 따옴표로 감싸는 것이 더 효율적일 것이라 생각한다.
• 빈 문자열을 표시할 때 ""로 표현하는 것보다 ''로 표현하는게 더 가독성이 좋다는 장점도 있다.

prettier

• vscode extention인 prettier을 쓰면 sigleQuote = false가 기본값으로 설정되어있다.
• prettier 사용자 중 작은 따옴표로를 기본으로 사용하고 싶다면 해당 속성을 true로 바꿔주면 된다.