[자바스크립트 강좌 009] 즉시 실행 함수 사용 (Javascript Function)

[자바스크립트 강좌 009] 즉시 실행 함수 사용 (Javascript Function)

함수를 정의함과 동시에 바로 실행하는 함수를 Javascript 즉시 실행 함수라고 한다. 이 함수도 익명 함수를 응용한 형태이다. 우선 다음 예제 코드를 살펴보자.

익명 함수를 정의함과 동시에 결과가 출력된다.

(function (name) {
    console.log('This is the immediate function -> ' + name);
})('foo');

This is the immediate function --> foo

자바스크립트 즉시 실행 함수를 만드는 방법은 간단하다.

우선 함수 리터럴을 괄호()로 둘러싼다. 이때 함수 이름이 있든 없든 상관없다. 앞 예제에서는 function (name) { ... } 부분을 괄호로 감쌌다. 그런 다음 함수가 바로 호출될 수 있게 () 괄호 쌍을 추가한다.

이때 괄호 안에 값을 추가해 즉시 실행 함수의 인자로 넘길 수가 있다. Javascript 예제의 경우는 ('foo')로 즉시 실행 함수를 호출했으며, 이때 'foo'를 인자로 넘겼다. 이 값은 앞 예제 즉시 실행 함수의 name 매개변수로 넘겨지게 된다.

이렇게 함수가 선언되자마자 실행되게 만든 즉시 실행 함수의 경우, 같은 함수를 다시 호출할 수 없다. 따라서 즉시 실행 함수의 이러한 특징을 이용한다면 최초 한 번의 실행만을 필요로 하는 초기화 코드 부분 등에 사용할 수 있다.

[Javascirpt Function] Immediately-invoked function expression

즉시 실행 함수의 또 다른 용도를 알아보자. 그것은 바로 jQuery와 같은 자바스크립트 라이브러리나 프레임워크 소스들에서 사용된다는 것이다. jQuery의 최신 소스 코드를 살펴보면 소스의 시작 부분과 끝 부분이 다음 예제와 같이 즉시 실행 함수 형태로 구성되어 있음을 확인할 수 있다.

즉, jQuery 소스 코드 전체가 즉시 실행 함수로 감싸져 있다.

(functiono( window, undefined) {
...
})( window );

이렇게 jQuery에서 즉시 실행 함수를 사용하는 이유는 자바스크립트의 변수 유효 범위 특성 때문이다.

자바스크립트에서는 함수 유효 범위를 지원한다. 기본적으로 자바스크립트는 변수를 선언할 경우 프로그램 전체에서 접근할 수 있는 전역 유효 범위를 가지게 된다.

그러나 Javascript 함수 내부에서 정의된 매개변수와 변수들은 함수 코드 내부에서만 유효할 뿐 함수 밖에서는 유효하지 않다. (여기서 변수들은 var 문을 사용해서 정의해야 한다. 그렇지 않으면 함수 내의 변수라도 전역 유효 범위를 갖게된다)

이것은 달리 말하면 함수 외부의 코드에서 함수 내부의 변수를 엑세스하는 게 불가능하다는 것이다. 따라서 라이브러리 코드를 이렇게 즉시 실행 함수 내부에 정의해두게 되면, 라이브러리 내의 변수들은 함수 외부에서 접근할 수 없다.

따라서 이렇게 즉시 실행 함수 내에 라이브러리 코드를 추가하면 전역 네임스페이스를 더럽히지 않으므로, 이후 다른 자바스크립트 라이브러리들이 동시에 로드가 되더라도 라이브러리 간 변수 이름 충돌 같은 문제를 방지할 수 있다.

Javascript 즉시 실행 함수 패턴

즉시 실행 함수 패턴은 이미 언급했듯이, 라이브러리 코드가 로드되면 실행되는 초기화 작업을 할 때 많이 사용된다. jQuery 외에도 대부분의 라이브러리가 이와 같은 방식이므로, 잘 이해해야 한다.

[Javascirpt Function] Immediately-invoked function expression

다음은 몇 가지 유명 라이브러리의 초기화 코드이다.

[ Underscore 1.3.3 ]
 
(function() {
    var root = this;
    var previousUnderscore = root._;
    ...
    var _ = function(obj) { return new wrapper(obj); };
    ...
    root['_'] = _;
    ...
}).call(this);

Underscore 1.1.3은 call 함수를 this 인자와 함께 사용하였다.

이렇게 넘긴 this가 Javascript 즉시 실행 함수 내부의 this에 바인딩된다. 물론 이것도 전역 객체이다. 함수 내부에서 root라는 이름으로 사용된다. 그리고 root에 '_'를 추가한다.

underscore는 브라우저뿐만 아니라, node.js에서도 사용이 가능하게 설계되었다.

[ Sugar 1.2 ]
 
(function() {
    ...
    // Initialize
    buildObject();
    buildString();
    buildFunction();
    initializeClass(date);
})();

Suarg 1.2는 특별한 인자 없이 즉시 실행 함수를 호출한다.

sugar에서 제공하는 대부분의 함수는 Object.prototype이나 Function.prototype 등 기존에 있는 객체에 들어가므로, 특별히 네임스페이스를 정의하지 않았다.

이와 같이 라이브러리 코드가 처음 로드되어 초기화할 때, 즉시 실행 함수 패턴이 많이 사용됨을 기억하도록 하자.

출처 : 인사이드 자바스크립트

[자바스크립트 강좌 009] 즉시 실행 함수 사용 (Javascript Function)