toggle menu

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

2015.01.21 17:14 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!");
}();



마치며


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


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










신고

JavaScript 관련 포스팅 더보기

티스토리 툴바