본문으로 바로가기
반응형

Javascript Stuty

  - javascript 함수 선언문, 함수 표현식 에서의 세미콜론

 

 
function statement (함수 선언문)와 function expression(함수 표현식)에서 세미콜론

 

일반적으로 자바스크립트 코드를 작성할 대 함수 선언문 방식으로 선언된 함수의 경우는 함수 끝에 세미콜론(;)을 붙이지 않지만, 함수 표현식 방식의 경우 세미콜론(;)을 붙이는 것을 권장한다.

 

ex)
// 함수 선언문 방식
function add(x, y){
     return x+y;
}
// 함수 끝에 세미콜론을 붙이지 않는다.

 

// 함수 표현식 방식
var add = function sum(x,y){
     return x+y;
};
// 함수 끝에 세미콜론을 붙이도록 한다.

 

자바스크립트는 세미콜론 사용을 강제하지는 않는다. 자바스크립트 인터프리터가 자동으로 세미콜론을 삽입시켜 주기 때문이다.
그렇다고 해서 세미콜론 사용을 신경 쓰지 않으면 디버깅 상황에서 애먹을 수 있다.

 

ex)
// 함수 표현식 방식에 ;를 안 붙인 경우 이후 바로 즉시 실행 함수가 오는 경우.
var func = function(){
     return 1;
} //세미콜론 사용하지 않음.
(function() {
 console.log("test");
})();

 

이 코드를 통해 func()함수를 호출하면 의도와는 다르게 'number is not a function'이라는 에러가 발생한다.


그 이유는 자바스크립트 파서가 func()의 함수 정의에서 세미콜론을 사용하지 않아, return 42; 문장을 지나 func() 함수 정의 끝에있는 중괄호 (}) 만으로 함수가 끝났다고 판단하지 않기 때문이다.


그리고 자바스크립트 파서는 이후 괄호에 두러싸여 정의된 즉시 실행함수를 보고 이를 마치 func()함수 호출 연산으로 생각한다. 즉 func()함수 호출 후 42가 반환되고 42();형태로 또다시 함수를 호출하려 시도한다. 그러나 42는 숫자이지 함수가 아니므로 'number is not a function' 에러가 발생한다.

 

어려운 설명이지만 이러한 문제가 발생할 수 있다는 것이다. 많은 자바스크립트 가이드에서 함수 표현식 방식에서의 세미콜론 사용을 강력 히 권고한다.

반응형

댓글을 달아 주세요