세미콜론, 그 끝나지 않는 논쟁

Posted on | Edited on

세미콜론

세미콜론 성대 페북세미콜론 성대 페북
[사진 성균관대학교 대나무숲 페이스북 캡처]

자바스크립트에서의 세미콜론(;) 사용에 대한 논쟁이 갑자기 다시 불이 붙는 이유는 여기서 알 수 있었다.
semi-colon 사용을 의무화하는 것을 고려중인 TC39

as new syntactic features are added to ECMAScript, additional cases requiring explicit semicolons emerge over time. As such, consistently explicit semicolon use is recommended.
새로운 문법이 ECMA 스크립트로 추가되는 과정에서 명시적으로 세미콜론을 사용해야 하는 경우가 나타나고 있다. 그러므로 일관성 있게 세미콜론을 명시적으로 사용하는 것을 권고한다.

(https://jayjnu.github.io/2018/01/24/2018-jan-3rd-week/ 에서 인용)

풀리퀘가 하도 많아서 접속 장애가 일어나는 경우는 처음 봤다.;;
자바스크립트에서의 세미콜론 사용에 대한 이야기는 끝나지 않는 논쟁이긴 하지만 매우 접근이 쉽고 재미있는 논쟁거리이기도 하다.
아직 경험에서 우러나오는 주장을 펼치기에 부족한 감이 있지만 알고 있는 요점만 정리해서 글을 읽는 여러분에게 선택을 맡기도록 하려고 한다. 참고로 나는 앞으로 세미콜론을 쓸 것이다.

자바스크립트에서는 세미콜론을 빼도 상관없다?

자바스크립트에서는 세미콜론을 생략할 수 있는 점이 매우 편리하다.

1
2
3
var i = 0; i++

// 세미콜론이 꼭 필요한 경우
1
2
3
4
5
var i = 0

i++

// 세미콜론이 들어가도 되고 안 들어가도 되는 경우

이는 ECMAScript 표준에서 지원하는 자동 세미콜론 삽입 덕분이다. 이는 특정 문맥에서 생략된 세미콜론을 추론하여 파싱해 주는 매커니즘이다.
세미콜론 자동 삽입 규칙은 다음과 같다.

  • 한 줄 이상의 새로운 행
  • 프로그램 입력의 끝부분
  • } 토큰 전

다시 말하면 이 경우 외에는 세미콜론을 명시해 줘야 한다는 뜻이다.

또 다른 규칙을 보자.

  • 세미콜론은 다음 입력토큰이 존재하지 않을 경우에만 파싱된다.
1
2
3
a = b

( f() )

위 코드는 문제없다. 

1
2
3
a = b

f ()

위 코드는 문제가 된다.
다음과 같이 해석되기 때문이다. 

1
a = b f ()

다음과 같은 배열 리터럴의 경우도 문제가 된다. 

1
2
3
4
5
6
7
a = b

["x","y","z"].forEach(function(key) {

   ...

}

다음과 같이 파싱되기 때문이다.

1
2
3
4
5
a = b["x","y","z"].forEach(function(key) {

   ...

}

그래서 자동 세미콜론 삽입기능의 도움을 받으려면 (, [, +, -, / 등의 표현식 연산자나 접두어 토큰을 쓸 때 조심해야 한다. 삽질의 사직이 될 수 있음.

위의 경우를 제외하면, 또는 완벽하게 코딩 초심자가 아닌 이상은 에러를 보기 쉽지 않고 최근의 ECMA6나 컴프레셔들은 완벽한 세미콜론 자동 삽입을 지원하므로 우리가 신경쓸 것이 거의 없다.
그렇다면 세미콜론 사용의 장/단점은 무엇일까?

세미콜론은 필요 없다?

  1. 코드량이 줄어든다
    세미콜론 또한 코드의 한 부분이므로, 붙이지 않아도 된다면 실질적인 코드량이 줄어든다.

  2. 일관성있다
    일관된 한 가지의 규칙을 가져야 한다면 세미콜론을 붙이지 않는 것이 낫다. 예를 들어 if나 for문, switch문을 쓸 때는 블록 뒤에 세미콜론을 붙이지 않는 것이 맞지만 습관적으로 닫히는 } 뒤에 일관적으로 세미콜론을 붙일 수 있는데, 헷갈리게 한다면 차라리 다 빼는 것이 맞다.

  3. 예쁘다
    단순히 예쁘고 깔끔하다는 이유 하나만으로도 세미콜론을 빼는 이유는 충분하다.
    사실 세미콜론을 쓰지 않는 사람들한테 물어보면 10의 6은 이 대답으로 시작한다. 개인적인 취향이기는 하나, 덕지덕지 붙은 세미콜론을 제거하는 것만으로도 심미적인 만족감이 드는 것은 개발자로서 어쩔 수 없다.

세미콜론은 강제되어야 한다?

  1. 안전성
    예시를 통해 자동 세미콜론 삽입기능이 에러를 뱉어낼 수 있는 경우를 몇 가지 보았는데, 이러한 오류가 발생할 여지가 있다면 그냥 처음부터 명시적으로 세미콜론을 사용하는 것이 좋다.
    예상할 수 있는 코드를 작성하는 것이 자동 파싱보다 더욱 안전한 것은 반박 불가능한 사실이다.

  2. 속도
    인터프리터가 코드를 해석할 때 세미콜론을 붙이지 않는 경우 조금 더 느리다는 비교가 있다.
    https://jsperf.com/asi-performance/2
    하지만 아주 미미하다.

  3. 발전에 따른 부합성
    TC39의 발표에 동의하는 것으로, 앞으로 언어가 발전함에 있어서 세미콜론을 사용해야 하는 경우는 더욱 더 늘어날 것이라는 주장이다. 자세한 것은 TC39의 주장을 읽어보는 것이 도움이 될 것이다.

무엇이 표준이 될지는 모르겠지만, 이미 많은 사람들이 자바스크립트의 유연성을 잘 이용하고 있다. 한번 들인 코딩 습관을 고치는 것은 퍼포먼스 측면에서나 노력 면에서나 아주 괴로운 일임에 틀림없다.
뭐 세미콜론을 강제하는 것이 표준이 된다 하더라도, linter나 pretter 등을 사용하면 문제되지 않을 부분이기도 하다. 그러나 이유를 알고 사용하는 것과 모르고 사용하는 것의 차이가 분명히 존재하므로 한 번씩 공부해 보면 좋은 주제일 것 같다.

나 같은 경우는 grunt로 여러 js파일을 minify하는 과정에서 예상했던 코드로 파싱되지 않아 에러를 본 일이 있고, 객체 선언 뒤에 세미콜론이 없다며 크로스브라우징이 되지 않았던 경험도 있었다 ( ie 구버전에서 에러가 났을 때 정확한 원인을 뱉어 주지 않는 경우가 있어 이틀간 삽질을 했었다 )
이러한 경우를 방지하기 위해서라도 명시적으로 세미콜론을 사용하는 습관을 들일 예정이다.
나같은 경우 툴 사용이 익숙하지 않아 그렇다 치지만 여러분은 linter에 익숙해져 있을 테니 조금 더 순조롭게 코딩 스타일을 지켜나갈 수 있을 것이라 생각한다.