JavaScript 세미콜론 가이드

출처 : https://www.codecademy.com/resources/blog/your-guide-to-semicolons-in-javascript/

필수:두 개의 문이 같은 줄에 있는 경우

세미콜론은 같은 줄에 두 개 이상의 문이 있는 경우에만 필수입니다.

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

옵션: After 스테이트먼트

JavaScript의 세미콜론은 스테이트먼트를 구분하기 위해 사용되지만 스테이트먼트에 줄 바꿈이 이어지는 경우(또는 {블록}에 스테이트먼트가 1개만 있는 경우) 생략할 수 있습니다. 스테이트먼트는 컴퓨터에 무언가를 지시하는 코드입니다. 가장 일반적인 유형의 스테이트먼트는 다음과 같습니다.

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., assignmt, and func. defin.
alert("hi");                  // function call

이러한 문장은 모두 세미콜론(;)으로 끝날 수 있습니다. 하지만 모두 그래서는 안 됩니다. 어떤 사람들은 각 문장을 세미콜론으로 끝내는 것이 좋은 습관이라고 생각한다. 코드 해석과 압축이 조금 쉬워집니다. 줄 바꿈을 삭제하면 같은 줄에 여러 개의 문이 분리되지 않을 수 있습니다.

피하세요!

1. 닫는 곱슬괄호

닫는 곱슬 괄호 '}' 뒤에 세미콜론을 넣으면 안 됩니다. 유일한 예외는 다음과 같은 할당문입니다. var obj = {};를 참조해 주세요.

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

// BUT:
do {...} while (...);

// function statement: 
function (arg) { /*do this*/ } // NO semicolon after }

(2) if, for, while 또는 switch 스테이트먼트의 둥근 괄호 뒤에 있는 것

if 스테이트먼트의 { } 뒤에 세미콜론을 붙이는 것도 나쁘지 않습니다.(무시되고 불필요하다는 경고가 표시될 수 있습니다).

단, 세미콜론이 속해 있지 않은 경우는 매우 나쁜 생각입니다.

if, for, while, 또는 switch 스테이트먼트의 둥근 (괄호) 뒤에 

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

// equivalent to:

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

이 코드는 "hi"를 경고하지만 0이 1이기 때문이 아니라 세미콜론으로 인해 경고합니다.그러면 JavaScript는 사용자가 빈 스테이트먼트를 가지고 있다고 생각하게 되고, 그 오른쪽에 있는 모든 것이 더 이상 if조건부로 속하지 않는 것으로 취급됩니다.  따라서 그것 alert은 if 선언문과 무관합니다.

물론 예외는 있지만...

중요한 특이점: for 반복문의 () 내부에서, 세미콜론은 첫 번째와 두 번째 문 뒤에만 오고 세 번째 문 뒤에는 가지 않습니다.

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

세미콜론 수정 방법

Codecademy 코드 에디터에 내장된 JavaScript 구문 검증 도구 JSLint는 불필요한 세미콜론이나 누락된 세미콜론을 찾는 데 매우 적합합니다.

노란색 경고 삼각형이 코드 라인으로 표시됩니다.마우스를 삼각형 위에 놓으면 세미콜론이 누락되었는지 또는 불필요한 세미콜론이 있는지 알 수 있습니다.일반적으로 세미콜론을 사용할 위치와 사용하지 않을 위치를 직감할 때까지 이러한 경고를 신뢰할 수 있습니다.