Guide to Semicolons

JavaScript 기본서 공부 중에 "언제 세미 콜론을 붙여야 하는 가?"에 대한 글을 봤는데, 모르고 있던 부분이 있어 블로그에 다시 정리하려 한다.

Required:

When two statements are on the same line

var i = 0; i++ // <-- semicolon obligatory
			   //     (but optional before newline)
var i = 0	   // <-- semicolon optional
i++			   // <-- semicolon optional

한 줄에 두 개 이상의 statement(문)가 존재할 경우 statement를 구분짓기 위한 세미 콜론은 필수이다.

Optional:

After statements

var i;			// variable declaration
i = 5;			// value assignment
i = i + 1;		// value assignment
i++;			// same as above
var x = 9;		// declaration & assignment
var fun = function() {...}; 
                // var decl., assignment, and func. defin.
alert("hi");	// function call

위와 같이 line break를 넣어 한 줄에 statement가 하나씩 작성되어 있는 경우에는 세미 콜론은 생략될 수 있다. (line break 없이 {...}가 한 줄로 작성되어 있는 경우 포함)

모든 statement를 끝낼 때 끝에 세미콜론을 붙이는 습관을 가진다면 line breaks가 없어지는 상황이 되더라도 parsing, compressing 시에 문제가 생기는 상황을 방지할 수 있다.

Avoid:

After a closing curly bracket

// No semicolons after }:
if (...) {...} else {...}
for (...) {...}
while (...) {...}

// BUT:
do {...} while (...);
                
// function assignment:
function (arg) { /* do this */ } // NO semicolon after }

curly bracket 뒤에는 세미 콜론을 붙이지 않도록 가이드 하고 있는데, 유일한 예외 사항은 위에 언급한 변수 선언 시 밖에 없다. (var obj = {};)

참고한 글에서 이유는 나와 있지 않았는데 아마 curly bracket 또한 parsing 구분자의 역할을 해줄 수 있기 때문에 이중으로 세미 콜론을 넣지 않는 이유일 것 같다.

After the round bracket of an if, for, while or switch statement

if (0 === 1); { alert("hi") }

// equivalent to:

if (0 === 1) /* do nothing */ ;
alert ("hi");

이전 케이스 같이 {} 뒤에 붙는 세미 콜론은 권장하지 않아도 실행 시에 무시되어 동작에 큰 영향을 주지는 않지만, if, for, while, switch 구문의 round bracket () 뒤에 붙이는 세미 콜론은 원하는 동작과 다르게 인터프리팅이 될 수 있다.

위 예시에서 if (...) 뒤에 붙은 세미 콜론은 if 문이 끝났다는 의미가 되어, if 문 뒤에는 아무 동작도 하지 않는 것으로 해석된다.

따라서 0 === 1 이 false 임에도 뒤에 따라오는 alert 코드가 별도의 statement로 인식되어 실행되는 것이다.

Exceptional:

for (..;..;..)

for (var i=0; i<10; i++) {/*actions*/}		// correct
for (var i=0; i<10; i++;) {/*action*/} 		// SyntaxError

for문 조건을 입력할 때는 round bracket 안에 statement를 구분 짓는 세미 콜론을 넣어 주어야 한다. 다만, 마지막 세번째 statement 뒤의 세미 콜론은 syntax error를 유발한다.

Reference

Your Guide to Semicolons in JavaScript