JavaScript에서 세미콜론을 사용해야 합니까?

언뜻 보기에는 사소해 보일 수 있는 주제이지만 실제로는 자바스크립트 개발자들 사이에서 논란을 불러일으키는 주제다. 세미콜론, 예 또는 아니오?

다른 많은 언어와 마찬가지로 JavaScript의 구문은 C programming language 을 기반으로 합니다. 해당 언어에서는 명령문(예: 명령)을 끝내기 위해 세미콜론이 필요합니다.

그러나 JavaScript 인터프리터는 일부 상황에서 줄 바꿈 전에 세미콜론을 "삽입"하는 시스템인 자동 세미콜론 삽입을 사용합니다. 문자 그대로 코드에 삽입하지 않고 인터프리터는 ASI가 결정하는 세미콜론이 있는 것처럼 작동합니다.

예를 들어, 다음 코드에서:

const myName = "Nico"
const myLastName = "Zerpa"
console.log(`My full name is ${myName} ${myLastName}`)

ASI 시스템은 1행의 "Nico" 뒤에, 2행의 "Zerpa" 뒤에, 3행의 닫는 괄호 뒤에 세미콜론을 추가합니다.

자동 세미콜론 삽입의 정확한 규칙은 the official JavaScript/ECMAScript specification에서 찾을 수 있습니다.

문제는 ASI가 예상대로 작동하지 않는 일부 경우에 세미콜론을 생략하면 코드가 모호해질 수 있다는 것입니다. 다음은 이에 대한 예입니다.

function getData() {
  return
  {
    name: "Mel",
    age: 49,
    favoriteFood: "Pizza"
  }
}

const melData = getData()
console.log(`Her name is ${melData.name},
  she's ${melData.age}
  and she loves ${melData.food}`)

위의 코드는 ASI가 예기치 않은 위치에 세미콜론을 삽입하기 때문에 작동하지 않습니다. 두 번째 줄의 return 키워드 뒤에 있습니다. 게다가 JS 인터프리터가 혼란스러워집니다. 추가된 세미콜론으로 인해 객체가 코드 블록이라고 잘못 생각합니다. 그러면 구문 오류가 발생합니다.

이런 문제는 ASI가 세미콜론을 언제 집어넣는지만 알면 해결할 수 있다. 그러나 코딩은 거의 항상 팀 작업입니다. ASI 규칙을 암기하더라도 다른 개발자는 그렇지 않을 수 있으며 코드를 제대로 읽을 수 없습니다.

그런 이유로 세미콜론을 사용하기로 했습니다. JS 인터프리터를 포함하여 모두에게 더 명확합니다.


이 기사가 마음에 드셨다면 제 JavaScript 뉴스레터도 마음에 드실 것입니다.
격주 월요일마다 JavaScript 기술 수준을 높일 수 있는 쉽고 실행 가능한 단계를 보내드립니다. 확인해보세요: https://nicozerpa.com/newsletter