세미콜론과 자바스크립트: 명시적 사용의 중요성

세미콜론(;)은 자바스크립트에서 중요한 역할을 한다. 이는 문 (statement)의 끝을 나타내며, 자바스크립트 엔진이 코드를 올바르게 해석하고 실행할 수 있도록 도와준다. 일반적으로 세미콜론은 각 문의 끝에 명시적으로 붙여야 한다.

단, 0개 이상의 문을 중괄호로 묶은 코드 블록({…}) 뒤에는 붙이지 않는다.

예를 들어, if문이나 for문이 있다면 세미콜론을 붙이지 않는다. 왜냐하면 코드 블록은 자체 종결성이라는 언제나 문의 종료를 의미하는 속성을 갖기 때문이다.

if (...) {
  ...
}

for ( ; ; ) {
  ...
}

자바스크립트 엔진은 소스코드를 해석할 때 문의 끝이라고 예측되는 지점에 세미콜른을 자동으로 붙여주는 세미콜론 자동 삽입 기능(ASI, Automatic Semicolon Insertion)이 암묵적으로 수행되기 떄문이다.

세미콜론 자동 삽입 기능(ASI, Automatic Semicolon Insertion)이란?
자바스크립트의 특징 중 하나로, 개발자가 코드에서 세미콜론(;)을 생략했을 때 자바스크립트 엔진이 자동으로 세미콜론을 삽입하는 기능이다. ASI가 도입된 배경은 주로 사용자 편의성과 초기 자바스크립트 설계 철학에 기인한다.

이 자바스크립트가 나왔을 당시에 웹 개발자 대부분은 프로그래밍에 익숙하지 않았기 때문에, 자바스크립트는 가능한 쉽고 접근하기 좋은 언어로 설계되었다. 그래서 ASI는 세미콜론을 잊어버렸을 때 발생할 수 있는 작은 실수를 자동으로 수정해주는 방식으로, 개발자의 부담을 줄여줬다.

그렇다면 세미콜론을 굳이 안 붙여도 상관없지 않을까?
이런 생각이 들었지만, 이 동작이 개발자의 예측과 일치하지 않는 경우도 간혹 있다고 한다. 그래서 코드를 짤 때, 세미콜론을 사용하지 않아서 이상한 에러를 발생시키는 것보다는 처음부터 세미콜론을 잘 붙여서 코드가 제대로 동작되게 하고 통일성있는 좋은 코드라고 할 수 있다.

그래서 명시적으로 세미콜론을 사용하는 것을 권장하고, 코드의 가독성과 유지보수를 위해 EsLint와 같은 도구를 활용하여 ASI가 발생할 가능성을 최소화한다고 한다.