함수 선언문과 함수 표현식에서의 세미콜론(;)

Semi Colon

일반적으로 코드를 작성할 때 함수 표현식에서는 ;(세미콜론)을 붙히고 함수 선언문으로 작성할 시에는 ;(세미콜론)을 붙이지 않는다.

이것은 하나의 관습이고 코드 작성시 권장되는 방식이다.

그리고 자바스크립트에서 세미콜론 사용을 강제하지는 않는다. 

그 이유는 자바스크립트 인터프리터가 자동으로 세미콜론을 삽입시켜 주기 때문이다. 

하지만 세미콜론에 신경을 쓰지 않는다면 소스 압축 배포를 하거나 디버깅을 할 시에 심각한 상황에 직면하게 될 것이다.

다음의 코드 예제를 살펴보자

// 'hello world!!!' 를 출력하려는 코드

//  함수 표현식에 세미콜론을 사용하지 않음
var test = function() {
    return 300;
} // 세미콜론 없음

(function() {
    console.log('즉시 실행함수(자가실행함수)로 바로 실행함')
})();

이 코드를 실행하면 콘솔창의 내용을 출력하려는 의도와는 다르게 'number is not a function' 이라는 에러가 발생할 것이다.

그 이유는 자바스크립트 파서가  test 함수 표현식에서 세미콜론을 사용하지 않아서 6번째 줄의 중괄호인 }를 함수가 끝났다고 판단하지 않기 때문이다. 

그리고 이후에 정의된 즉시 실행함수를 파서하면서 함수 표현식인 test를 호출하지도 않았음에도 괄호에 둘러싸인 익명함수(즉시실행함수로 사용하려고 한)때문에 test()를 호출해 버리기 된다. 

즉, test()를 호출하면 return문의 300을 반환되고, 즉시 실행함수를 실행하려고 남겨둔 마지막 괄호()로 인해  300(); 형태로 또다시 함수를 호출하려고 시도한다.

그러나 300은 숫자일 뿐 함수가 아니므로 'number is not a function'라는 에러가 발생하는 것이다.

그렇기 때문에 함수 표현식에서는 특히 세미콜론 사용을 적극 권장하고 있다.

[출처 : 인사이드 자바스크립트]

Jaehee's WebClub