12. Javascript 클로저(Closure)(2) - 클로저의 활용 3

 

지금까지 배운 클로저 함수 활용 예제의 마지막입니다. 이번에는 흔히 사용하게 되는 setTimeout( ) 함수와 연계하여, 클로저를 활용하는 예제를 살펴보도록 하겠습니다. 

 

우선 setTimeout( ) 함수의 가장 기본적인 사용 형태인 두 개의 인자 - 즉 function / delay만을 사용하는 상황을 가정해 봅시다. 첫 번째 인자 function은 말 그대로 함수를 입력하게 됩니다. 이 함수의 실행을 통제하려는 목적을 갖게 되지요. 이번 아티클에서는 함수 변수 형태로 전달해 보겠습니다. 두 번째 인자 delay에는 밀리 초 단위 숫자의 시간 간격으로 해당 함수를 호출하게 됩니다. 5000을 입력하면 5초 후에 function으로 전달한 함수가 실행되지요.

 

그리고, 여기서 인자로 사용할 function에는 실행될 때 전달해야 하는 인자가 있다고 가정해 봅시다. 이때, setTimeout( ) 함수 자체의 정의가 아닌 클로저를 사용해 function이 실행될 때 인자 값을 전달하게 되는 경우를 만들어 보도록 하겠습니다. 

 

function callLater(obj, a, b){
    return (function(){
        obj["sum"] = a + b;
        console.log(obj["sum"]);
    });
}

var sumObj = {
    sum : 0
}

var func = callLater(sumObj, 1, 2);
setTimeout(func, 1000);

 

위의 예제를 살펴보겠습니다. callLater( )라는 사용자 정의 함수가 선언됩니다. 이 함수는 obj, a, b 세 개의 매개변수를 갖습니다. 그리고 이 함수에 인자 값을 전달해 실행하게 되면, 정의와 같이 특정 객체의 [sum]이라는 프로퍼티에 a와 b의 합계를 저장하고 그 값을 출력하도록 선언된 익명 함수를 리턴하게 됩니다. 이 익명 함수는 클로저 함수가 되겠네요. 

 

실제로 callLater에 sumObj, 1, 2를 전달하여 실행했습니다. 결과는 어떻게 될까요? 지금까지 아티클 내용을 충분히 학습하셨다면 자신은 없겠지만 세 개의 인자가 전달된 익명 함수가 고스란히 func 변수에 저장되는 것을 알 수 있을 것입니다. callLater 실행 컨텍스트는 종료되었지만, 해당 인자 값들은 여전히 사용할 수 있는 것도 눈치채셨을 것입니다. 

 

이제 setTimeout( ) 함수에 func와 1000을 넣어 실행하면, 약 1초의 딜레이 후에 func( ) 함수가 실행된 것을 확인할 수 있습니다. 이 때 클로저로 전달된 함수에서는 sumObj, 1, 2라는 인자 값을 그대로 유지해 해당 함수를 실행하게 됩니다. 실행 컨텍스트가 끝나도 우리가 원하는 인자의 참조는 그대로 유지되는 것을 확인할 수 있죠.