Self-Executing Anonymous Functions (익명 함수)

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

위와 같은 Anonymous Function을 보자.

처음 구조는 anonymous function이다:

(function(){
   // Normal code goes here
})

흥미로운 부분은 끝에 추가되어 있는 이 부분이다:

();

이 괄호 안에 있는 것들이 앞에 있는 괄호에 포함되어 있는 함수를 실행하도록 한다. JavaScript에는 function level scoping이라는 것이 있는데, 이 anonymous function 안에서 선언된 모든 변수와 함수들은 anonymous function 밖에서는 존재하지 않는다. 즉 외부에 있는 변수나 함수로부터 고립되어 있다.

따라서 아래와 같은 코드는 실행될 수 없다. 왜냐하면 익명 함수 안에 있는 foo 변수는 밖에서 접근할 수도 없고, 소멸되기 때문이다:

(function(){
        var foo = 'Hello';
        var bar = 'World!'

        function baz(){
                return foo + ' ' + bar;
        }
})();

 //These all throw exceptions:
console.log(foo);
console.log(bar);
console.log(baz());

만약 익명 함수 내의 변수나 함수를 외부에서도 사용할 수 있게 하려면, global한 'window' object에 할당시킬 수 있다:

(function(){
        var foo = 'Hello';
        var bar = 'World!'

        function baz(){
                return foo + ' ' + bar;
        }

        window.baz = baz; //Assign 'baz' to the global variable 'baz'...
})();

console.log(baz()); //...and now this works.

//It's important to note that these still won't work:
console.log(foo);
console.log(bar);

이러한 익명 함수의 디자인 패턴 중에서 유명한 것은, jQuery 소스에서도 볼 수 있는 것인데, 주로 사용되는 Object를 익명 함수에 넘겨주는 것이다. 아래의 함수에서는 'window'라는 reference를 anonymous function의 parameter로 넘겨주는 것을 확인할 수 있다:

(function(window){
        var foo = 'Hello';
        var bar = 'World!'

        function baz(){
                return foo + ' ' + bar;
        }

        //In this context, 'window' refers to the parameter
        window.baz = baz;
})(window); //Pass in a reference to the global window object

아래 코드에서, window를 reference하는 것으로 익명 함수 안에서 a가 사용되었으며, a와 window는 같다는 것을 확인할 수 있다:

(function(a){
        console.log(a === window); //Returns 'true'
})(window);

또한 jQuery에서 볼 수 있는 기법 중 undefined에 대한 alias를 만든 것을 볼 수 있다:

(function(window, document, $, undefined){
        var foo;
        console.log(foo === undefined); //Returns 'true'
})(window, document, jQuery);

위와 같이 undefined라는 parameter를 외부에서 따로 주지는 않았다. 따라서 parameter의 undefined는 말 그대로 undefined, 정의되어 지지 않았다. 굳이 undefined를 줄 이유도 없어 보이는데, 왜 undefined를 parameter로 지정해 준 것일까? 왜냐하면, javascript에서는 아래와 같은 코드가 가능해지기 때문이다:

undefined = true;

따라서 undefined가 undefined가 아니게 되버렷...! 이므로, 익명 함수 안에서는 적어도 undefined의 의미를 보호해 줄 수 있다.

또 여기서 jQuery를 $로 치환한 것도 볼 수 있는데, 이것은 jQuery의 noConflict를 쓰지 않고도 익명 함수 내에서 다른 frameworks와 함께 자유롭게 사용할 수 있다는 뜻이 된다.

아래 페이지를 제 입맛에 맞게 번역, 수정하였습니다:

http://markdalgleish.com/2011/03/self-executing-anonymous-functions/