클로저 - 2

클로저 응용의 예

이전에 했던 예를 활용해서 응용 개발하기

function outer() {
	var count = 0;
    return {
    	increase: function() {
        	return ++count;
        },
        derease: function() {
        	return --count;
        }
    };
}

var counter = outer();
console.log(counter.increase());  // === 1
console.log(counter.increase());  // === 2
console.log(counter.decrease());  // === 1

var counter2 = outer();
console.log(counter2.increase());  // === ?

 

이번에는 함수를 바로 반환하지 않고 3번 줄에서 함수를 2개 가지고 있는 새로운 객체를 생성해서 반환한다. 이때 반환된 객체는 12번 줄에서 counter 변수에 들어가고, 이로써 counter 변수의 속성으로 increase()와 decrease() 함수를 호출할 수 있게 된다. 이 2개의 함수는 outer() 함수의 내부에 선언되어 동일한 count 변수를 참조한다. 따라서 increase() 함수로 count 변수를 증가하고, decrease() 함수로 감소할 수 있다.

 

그리고 counter2 변수는 함수가 호출될 때 별도의 스코프가 생성되어 count 변수가 따로따로 저장된다.

그러므로 값은 1이 나온다.

 

하지만 outer() 함수로 생성한 변수들이 동일한 count를 공유하려는 의도였다면 IIFE와 클로저를 응용해서 해결할 수 있다.

var countFactory = (function() {
	var staticCount = 0;
    return function() {
    	var localCount = 0;
        return {
        	increase: function() {
            	return {
                	static: ++staticCount,
                    local: ++localCount
                };
            },
            decrease: function() {
            	return {
                	static: --staticCount,
                    local: --localCount
                };
            }
        };
    };
}());

var counter = countFactory(), counter2 = countFactory();
console.log(counter.increase());
console.log(counter.increase());
console.log(counter2.decrease());
console.log(counter.increase());

 

앞의 counter에서 다시 IIFE로 스코프를 하나 더 추가하여 최상위에 staticCount 변수를 추가했다. 일단 1번줄에서 IIFE로 static으로 사용할 로컬 변수를 선언한 뒤, 앞의 예제에서 사용했던 함수를 반환한다. 해당 함수가 실행되면 5번 줄에 정의된 객체를 반환하여 counter별로 localCount 변수를 사용할 수 있고, 공용으로 staticCount 변수를 사용할 수 있다.

 

staticCount와 localCount 변수의 값 변화 확인하기

object { static: 1, local: 1 }

object { static: 2, local: 2 }

object { static: 1, local: -1 }

object { static: 2, local: 3 }

 

이처럼 IIFE를 한 번 선언해서 클로저를 생성하는 방법은 다양한 곳에 활용될 수 있다.

위 내용들을 보면 클로저는 outer()와 같은 외부 함수에서 inner와 같은 내부 함수를 반환하여 다른 곳에서 해당 함수를 호출할 때 발생한다는 것을 알 수 있다.