JavaScript 문장 끝의 ;에 대해

이번 포스팅에서는 "JavaScript는 문장(statement)이 ;(semicolon)으로 끝나지 않아도 된다"는 것에 대해 생각해보는 시간을 갖도록 하겠습니다.

;을 사용하는 이유

왜 문장 끝에 ;을 사용하는 것일까요? C나 Java의 경우 모든 문장이 ;으로 끝납니다. 그런데 Python의 경우 모든 문장이 개행문자로 끝납니다. (물론 상황에 따라 (), [], {}로 감싼 경우 개행문자를 만나도 문장이 끝나지 않지만요.)

그렇다면 왜 문장 끝을 중요하게 생각하는 것일까요? 사실 문장의 끝이 중요하다기보단, 다음 문장의 시작을 알아내는 게 parser에게 중요하기 때문입니다.

그렇다면 JavaScript의 경우 ;을 사용해도 되고 사용하지 않아도 되는데 어떻게 문장이 끝났다는 사실을 알 수 있을까요?

JavaScript에서 문장의 끝

JavaScript에서는 일단 문장의 끝을 ;으로 명시적으로 표시해주면 문장이 끝난 것으로 간주합니다.

추가로 아래의 경우 문장이 끝난 것으로 간주합니다.

• 토큰들을 차례로 읽어오면서 문법에 맞지 않는 토큰을 만났는데 그 전에 개행문자가 있음
• 혹은 문법에 맞지 않는 토큰이 }인 경우
  

이 규칙에 예외가 있는데 return, break, continue, throw 등을 사용할 때입니다. 이 경우에 대해서는 예제와 함께 차차 설명해 드리도록 하겠습니다.

예제

아래 예제 코드에 반드시 ;가 필요한 경우와 개행문자 다음의 토큰을 고려하지 않는 경우에 관해 주석과 함께 설명해놓았습니다.

'use strict' var str = 'hi there' console.log(str) /* * NOTE: 만약 ';'을 생략하면 * * console.log(str) * [0, 1, 2] * * 의 의미는 아래와 같습니다. * (console.log()의 리턴 값이 있다면?) * * console.log(str)[2] * * 라인의 시작에 위치할 경우 의미가 모호한 토큰들 * ( : 함수 호출 혹은 우선순위를 위한 괄호 * [ : 배열 원소 참조 혹은 배열 정의 * - : 빼기 혹은 음수 * + : 더하기 혹은 양수 * / : 나누기 혹은 정규표현식 */ ;[0, 1, 2].forEach(function (i) { console.log(i) }) /* * 아래 키워드들 뒤에 개행문자가 나올 경우, 다음 토큰을 고려하지 않습니다. * return : 리턴 값이 있을 수 있음 * break : 지정한 label로 나가고 싶은 경우 * continue : 지정한 label로 건너뛰고 싶은 경우 * throw : 구문 분석 실패 */ var i = 0 out: while (true) { for (var i = 0; true; i++) { if (i > 2) break out console.log(i) } }

위 예제 코드에서 "break out"을 같은 라인에 쓰지 않고, "out"이라는 변수가 이미 있었다면, while 문에서 무한 loop에 빠지게 됩니다. break 문의 경우 개행문자를 만나면 다음 토큰을 고려하지 않기 때문입니다.

마치며

;에 대해 아는 것이 얼핏 사소해 보일 수 있습니다. 물론 모든 문장에 ;을 사용하면 되겠지만, 위와 같은 특성에 대해 잘 알고 있다면, 어떤 스타일의 코드를 읽더라도 잘못 이해하는 경우가 없을 것입니다.

참고

JavaScript Semicolon Insertion – Everything you need to know

An Open Letter to JavaScript Leaders Regarding Semicolons

Posted by Bitnine(비트나인)