JavaScript에서 함수 표현식 뒤에 세미콜론을 꼭 붙여야 하는 이유

JavaScript에서 모든 함수 뒤에 세미콜론을 붙이는 것은 원래 선택 사항입니다. 하지만 함수 표현식(function expression)을 사용할 때는 세미콜론을 반드시 붙이는 것이 좋습니다. 그렇지 않으면 예상치 못한 결과나 오류가 발생할 수 있기 때문입니다.

세미콜론을 사용한 경우

var display = function () {
  alert("Hello World");
};
(function () {
  // 코드
})();

세미콜론을 사용하지 않은 경우

var display = function () {
  alert("Hello World");
}
(function () {
  // 코드
})();

첫 번째 예제에서는 세미콜론 덕분에 display 변수에 할당된 함수 표현식이 정확한 위치에서 종료됩니다. 따라서 이어지는 즉시 실행 함수(IIFE)도 의도한 대로 정상적으로 동작합니다.

반면 두 번째 예제처럼 세미콜론을 생략하면 문제가 생길 수 있습니다. JavaScript 엔진의 자동 세미콜론 삽입(ASI) 규칙에 따라 두 코드 블록이 하나의 연속된 표현식으로 해석될 수 있기 때문입니다. 이 경우 첫 번째 함수의 반환 값이 두 번째 함수의 인수로 전달되려다 TypeError: ... is not a function과 같은 런타임 오류가 발생하게 됩니다.

정리

• 함수 선언문(function declaration)에는 세미콜론이 필요하지 않습니다.
• 변수에 할당하는 함수 표현식 뒤에는 항상 세미콜론을 붙이는 것이 안전합니다.
• 특히 즉시 실행 함수(IIFE) 바로 앞에 오는 코드에는 세미콜론을 붙여 오류를 예방하세요.