다양한 즉시실행함수 호출패턴

다양한 즉시 실행함수 호출 패턴

가끔 자바스크립트 소스 중에 생소한 패턴의 함수 선언을 본 적이 있습니다.

자바스크립트는 문법, 타입이 엄격하지 않아서 특성에 대해 정확이 이해하고 있지 않다면 해당 코드가 어떤 동작을 하게 될지 짐작하기 어려울 수도 있습니다.

다음의 코드는 우리가 흔히 사용하고 있는 자가실행 함수의 호출패턴입니다.

JavaScript

(function () {

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

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

함수를 선언과 동시에 ()괄호 연산자를 바로 사용,호출하여 함수를 즉시 실행하도록 합니다.

다음의 코드는 생소한 패턴의 즉시 실행(자가실행)함수 호출 패턴입니다.

JavaScript

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

위 구문은 !(느낌표) 연사자를 사용합니다.

function 이기 때문에 먼저 함수가 해석되고 난 뒤에 () 괄호 연산자로 인해 함수를 호출,실행하게 됩니다.

함수 선언문이 먼저 해석되면서 연산자가 동작하게 되어 즉시 함수호출이 실행되게 됩니다.

그리고 function 이 실행된 후 그 리턴되는 값이 undefined 이기 때문에 그 결과값을 !(느낌표) 부정연산자로 부정해서 결과적으로 true 가 됩니다.

다시 말해서, 연산자를 실행하기 위해서는 함수 구문이 먼저 해석된다는 점을 이용한 즉시 실행함수 호출 패턴인 것입니다.

느낌표 이외에도 같은 호출패턴을 사용할 수 있는 연산자가 더 있습니다.

JavaScript

// 부정 연산자

!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!");
}();

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

위의 코드들은 일반적으로 사용되는 괄호 형태의 호출 패턴이 아니기 때문에 코드의 가독성면에서 떨어질 수 있으니 위와 같은 방법으로 즉시 실행함수 패턴을 사용할 수 있다는 정도로만 이해하는 것이 좋을 것 같습니다.

Jaehee's WebClub