본문의 코드는 counter라는 함수 내부의 변수를 증가시키는 incrementCounter 함수와, 초기화를 시켜주는 resetCounter 함수를 가지고 있는 객체(함수)입니다.
위와 같이 (function() {})(); 로 testModule 을 만들게 되면 해당 변수는 아래와 같이 사용을 할 수 있습니다.
> testModule.incrementCounter();
0
> testModule.incrementCounter();
1
> testModule.incrementCounter();
2만약 궁금해하는 것처럼 본문의 코드를 아래와 같이 function을 ()로 감싸지 않고 바로 함수로 만들어서 실행을 해보면 testModule2 는 함수라는 타입입니다.
var testModule2 = function () {
var counter = 0;
return {
incrementCounter: function () {
return counter++;
},
resetCounter: function () {
console.log( "counter value prior to reset: " + counter );
counter = 0;
}
};
};하지만 아래와 같이 incrementCounter() 로 호출을 하면 반환 값은 계속 0입니다.
> testModule2().incrementCounter()
0
> testModule2().incrementCounter()
0
> testModule2().incrementCounter()
0
> testModule2().incrementCounter()
0
> testModule2().incrementCounter()
0
> testModule2().incrementCounter()왜냐하면 testModule2() 이 호출할 때마다 새로운 객체가 만들어지기 때문입니다.
만약 첫 번째 실행한 것처럼 하기 위해서는 만들어진 객체를 변수에 담아야 합니다.
> var module2 = testModule2();
undefined
> module2.incrementCounter();
0
> module2.incrementCounter();
1
> module2.incrementCounter();
2testModule과 testModule2는 왜 이런 다른 동작을 보여줄까요?
typeof 로 타입을 확인해보면 다른 결과를 보여줍니다.
> typeof testModule
'object'
> typeof testModule2
'function'testModule은 타입이 'object'이고, testModule2는 'function'입니다.
testModule은 이미 함수로 만들어진 객체입니다. 그래서 제일 처음 예제처럼 incrementCounter() 를 호출했을 때 counter가 누적되며 증가를 하게 됩니다.
결론을 내려보면 function을 ()로 감싸주는 것과 감싸주지 않는 것은 동작이나 사용 방법에 차이가 있다는 것을 알 수 있습니다.
추가적으로 자바스크립트에서 클로저(Clousure) 라는 개념에 대해 더 알아보시면 도움이 될 것 같습니다.
