[JavaScript] 다양한 즉각 호출 패턴

최근 자바스크립트 소스들을 보다보면, 눈에 익숙치 않은 아래와 같은 형태의 함수 선언들을 발견할 수 있다.

!function () {
	console.log("Hello World!");
}();

자바스크립트의 특성에 대해서 명확하게 이해하고 있지 않다면, 위의 코드를 단순히 봐서는 어떤 동작을 하게 될지 예상하기가 쉽지 않다. (예시로 든 코드가 워낙 단순해서 예상할수도..)

위의 코드는 우리가 흔히 알고 있는 아래와 같은 형태의 즉각 호출 패턴의 변형이다.

(function () {
	console.log("Hello World!");
})();

느낌표(!) 로 부정하기 위해서는 뒤의 구문이 해석되어야 하는데, function 이기 때문에 일단 function 이 해석이 되고 뒤에 () 괄호가 있기 때문에 해당 function 을 실행하게 된다. 

function 이 실행된 후 그 리턴되는 결과값을 부정해서 결과적으로는 undefined 를 부정해서 true 가 되는데, 사실 true 가 되는건 큰 관심이 없고 function 을 즉각 호출한다는 것에 우리는 더 큰 관심이 있다.

연산자가 동작하기 위해 뒤의 구문이 먼저 해석된다는 점을 이용한 즉각 호출 패턴인 것이다.

느낌표 외에도 같은 효과를 낼 수 있는 연산자가 몇 개 더 있다.

//느낌표
!function () {
	console.log("Hello World!");
}();

//느낌표 여러번
!!function () {
	console.log("Hello World!");
}();

//플러스
+function () {
	console.log("Hello World!");
}();

//마이너스
-function () {
	console.log("Hello World!");
}();

//틸드
~function () {
	console.log("Hello World!");
}();

//틸드 여러번
~~function () {
	console.log("Hello World!");
}();

마치며

사실 정말 필요한 이유가 아니라면, 이런 식으로도 즉각 실행 패턴을 구현할 수 있다 정도로 이해하는 편이 좋다.

일반적으로 즉각 호출 패턴을 구현하기 위해 많이 사용하는 괄호 형태를 사용하는 것이 다른 이들도 읽기 좋은 코드를 만드는 방법이기 때문이다.