[javascript] 함수앞에 붙이는 ! ; + ~

관련 지식
#javascript #Automatic_semicolon_insertion #Immediately_Invoked_Function_Expressions

자바스크립트 함수 앞에 느낌표(!), 세미콜론(;), 플러스(+), 물결표(~) 가 붙는 경우를 볼 수 있습니다. 무슨 의미가 있는건지 알아보겠습니다.

즉시실행 함수 기본

아래와 같은 익명 함수가 있습니다. 물론 아래 소스는 함수를 선언하는 내용만 있기 때문에 실행되지 않습니다. 오히려 오류가 날 수도 있습니다.

function () {
  console.log('function call');
}

익명함수를 선언과 동시에 즉시 실행(Immediately Invoked Function Expressions) 하고 싶다면 아래처럼 만들수 있습니다.

(function () {
  console.log('function call 1');
})();

+ ! ~ 를 이용한 즉시실행 함수

혹시 함수 선언부를 감싼 괄호를 없애고 싶을수도 있겠지만 아래 형태는 오류입니다.

function () {  //오류
  console.log('function call 2');
}();

하지만 function 앞에 플러스 + 기호를 붙이면 정상적으로 실행이 됩니다. 이것은 객체앞에 + 가 붙을 경우 연산식으로 해석하기 때문입니다.

+function () {  //정상
  console.log('function call 2');
}();

참고 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators

+ 대신 느낌표 !, ~ 를 붙였을때도 마찬가지 입니다. 기호 뒤를 표현식으로 다루기 때문에 오류 없이 수행이 됩니다.

!function () {
  console.log('function call 3');
}();

~function () {
  console.log('function call 4');
}();

; 를 이용한 즉시실행 함수

세미 콜론을 붙이는 경우는 조금 다른 이유입니다. 아래 소스는 단독으로 실행될 경우 정상적으로 실행 됩니다.

(function () {
  console.log('function call 5');
}())

그러나 함수뒤에 또 다른 함수가 있을 경우 오류가 발생합니다.

(function () {
  console.log('function call 5');
}())
(function () {
  console.log('function call 6');
}());

자바스크립트는 표현식 등의 문법의 끝에 세미콜론을 붙이는것이 맞습니다. 그러나 가끔 빼먹더라도 오류없이 동작하는 것을 본 적이 있으실 겁니다.
자바스크립트 문법에는 ASI(Automatic semicolon insertion) 이라고 하는 세미콜론을 생략하더라도 자동으로 넣어주는 기능이 있기 때문에 오류를 내지 않은 것입니다.

참고 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Lexical_grammar#Automatic_semicolon_insertion

그러나 일부 경우에 대해서는 ASI가 적용되지 않기 때문에 개발자는 세미콜론 ;을 실수로 누락하지 않도록 조심해야 합니다. 위의 소스 또한 앞에 있는 함수에서 ;이 생략되었기 때문에 발생한 오류입니다. 그러나 뒤에 있는 함수의 앞에 ;이 추가 될 경우 오류가 나지 않습니다.

(function () {
  console.log('function call 5');
}())  //세미콜론 누락
;(function () {  //앞에 세미콜론 추가
  console.log('function call 6');
}());

즉 앞에 세미콜론을 붙이는 이유는 이전 소스에서 세미콜론이 누락되어 발생할 수 있는 오류를 없애기 위한 것입니다.

최종 샘플

(function () {
  console.log('function call 1');
})();
+function () {
  console.log('function call 2');
}();
!function () {
  console.log('function call 3');
}();
~function () {
  console.log('function call 4');
}();
(function () {
  console.log('function call 5');
}())
;(function () {
  console.log('function call 6');
}());