[태그:] javascript

이 부분을 번역할까 말까 한참을 고민했다.
대략 A4 한장 분량의 번역작업이 대충 2시간이 걸렸기 때문이다.
머이리 오래 걸려? 라고 묻는자에게 말하고 싶다.. 당신이 해봐~!! -_-

내가 알고 번역하는 것과,.. 모르고 번역한 것은 천지 차이다.
주위에 한글 번역서만 봐도 이건 금방 안다. 대부분이 아마도 원문을 보라고 권할 것이다.

나도 그렇다. 내가 모 취미반 공부반으로 번역은 하고 있지만, 원문을 꼭 다시 볼것을 권하는 바이다. 분명 이렇게 이야기 해도 안보는 사람들을 위해, 최대한 메끄럽게 번역할려고 노력중이다.
왜냐면, 나도 나름 영문꽈 학위 받은 남자기 때문에.. ㅋㅋㅋ
작년말에, 영한번역 수업을 들어놓은게 참 많이 도움이 되는거 같다..

여튼 각설하고,.. 시작해보자!!

원문 번역: http://www.jibbering.com/faq/faq_notes/closures.html
A4 용지로 출력하면, 15페이지중에 7번째 페이지가 되겠다!!

자동으로 일어나는 가비지 콜렉션

ECMA 스크립트는 자동으로 일어나는 가비지 콜렉션을 사용한다. ECMA 262 스펙 명세서에는 어떻게 가비지 콜렉션이 작동하는지에 대한 자세한 정의는 없지만, 일반적으로 “어떤 객체가 자신을 가르키는 참조자가 없을 경우에 그 객체는 가비지 콜렉터에 의해 가비지 콜렉션될수 있다.” 라는것이 일반적인 내용이다. 그러나 가비지 콜럭터에 의해 어느순간 콜렉션이 실제로 일어나는지 일어나지 않는지는 장담할수 없다.

(역주) 첫단락 해석이 이상해 의역을 많이 했다. 그리고 현재 ECMA 스펙을 확인중이다. 실제로 구현에 대한 아이디어가 있는지 없는지.. 확인 해봐야겠다..ㅋㅋㅋ

ECMA 스펙을 한창 보았다. 물론 처음부터 끝까지 보고 있는건 아니고, 필요한 부분만 참조해서 봤다. 그런데.. 오호라~ +_+_+_+ 스펙문서가 역시나 도움이 많이 됐다. 몰랐던 구현에 관한 아이디어가 너무나 많다. 물론 가비지 콜렉션에 대한 내용은 없었다. ㅋㅋㅋ

스펙문서를 보고, 처음에 이 문서 번역을 하면서 난해했던 부분이 상당부분 이해가 되고 있다 +_+_+ 이것도 차차 정리해둬야겠다.. 아~ 고수의 길은 멀고도 험하구낭..여튼 이어서~!!

클로져 만들기

클로져는 함수 객체가 리턴 되면서 형성되는데, 여기에는 2가지 조건이 있다.
먼저, 중첩된 함수가 다른 객체의 프로퍼티로 참조되거나 아니면, 전역변수나 전역적으로 접근 가능한 객체 혹은 외부 함수(중첩된 함수를 감싸는 함수)의 인자로써 넘겨지는 객체로 참조 되어질때, 클로져가 만들어진다. 아래 예제를 보자.

function exampleClosureForm(arg1, arg2){
    var localVar = 8;
    function exampleReturned(innerArg){
        return ((arg1 + arg2)/(innerArg + localVar));
    }
    /* return a reference to the inner function defined as –
       exampleReturned -:-
    */
    return exampleReturned;
}

var globalVar = exampleClosureForm(2, 4);

위에 exampleClosureForm 실행문맥 안에서 생성된 함수 객체는 가비지 콜렉션 되지 않는다. 그 이유는 전역변수에 의해 참조 되고, 여전히 접근 가능하기 때문이다. 또한, globalVar(n) 과 같은 형식으로 호출되어 실행할수도 있다.

하지만 위에 경우는 새로 생성된 실행 문맥 안에서 만들어진 함수객체가 globalVar 변수에 의해 참조되고 있고, 그 함수 객체의 [[scope]] 프로퍼티가 스코프 체인의 Activation/Variable 객체를 가르키고 있기 때문에 약간 복잡한 경우에 해당한다. 즉, 새로 생성된 exampleClosureForm 실행 문맥의 스코프 체인의 Activation/Variable 객체 역시 가비지 콜렉션이 되지 않는다.

현재 클로져가 형성되었고,위에 중첩된 내부함수 객체는 자유로운 변수들( 역주: free variables가 무엇을 의미하는지 정확히 알수 없으나, 다른 일반 변수들 보다 제약이 적다는 의미로 해석된다. 그런데 왜 저럽게 free variables라고 표현했는지 아직은 모르겠다. )과 스코프 체인에 있는 Activation/Variable 객체를 가진다.

그 Activation/Variable 객체는 globalVar 변수에 의해 참조되는 함수 객체의 [[scope]] 프로퍼티에 의해 참조되어 묵여 있는 상황이다. 그래서 이 Activation/Variable 객체는 그것의 프로퍼티의 값들이 그대로 보존된 상태로 있다. 중첩된 함수를 호출하는 실행문맥 안에서의 스코프에 대한 해석은 식별자로 해석을 한다.  즉, Activation/Variable 객체의 프로퍼티들이 식별자가 된다는 의미다. 그리고 이것은 여전히 set 과 put 두 가지를 모두 수행할수 있고, 실행문맥이 끝나더라도 여전히 존재하게 된다. 왜냐?.. 클로져로 묵여있는 상황이기 때문이다.

위 예제에서 외부 함수(내부 함수를 감싸는)가 리턴될때, Activation/Variable 객체는  공식적인 파라메타 그리고 중첩 함수 정의와 지역 변수로써 대표되는 상태를 가지고 있다. 즉, Activation/Variable 객체의 arg1 프로퍼티는 값 2 를 가지고 있고, arg2 프로퍼티는 값 4를 그리고  localVar 변수는 값 8을 그리고 exampleReturned 프로퍼티는 중첩된 내부 함수 객체를 가르키는 참조자를 가지고 있다. (앞으로 요 Activation/Variable 객체를 편의상 “ActOuter1” 이라고 부를것이다.)

만약에 exampleClosureForm 함수가 아래처럼 다시 호출되면,

var secondGlobalVar = exampleClosureForm(12, 3);

새로운 Activation 객체를 가지는 실행문맥이 만들어지고, 새로운 함수 객체가 리턴된다. 그 리턴되는 함수 객체의 [[scope]] 프로퍼티는 바로 이 두번째 실행문맥 안의 Activation 객체를 참조한다. 여기서 이 Activation 객체의 arg1 프로퍼티는 12, arg2 는 프로퍼티는 3를 갖는다. ( 편의상 앞으로 요 Actiovation 객체를 “ActOuter2” 라고 부를 것이다. )

여기서 명확하게 두번째 클로져가 exampleClosureForm 의 두번째 실행문맥에 의해 형성되었다.

exampleClosureForm의 실행으로 각각 globalVar 전역변수와 secondGlobalVar 전역변수에 생성되어 할당된 두 함수 객체는  표현식 ((arg1 + arg2 ) / (innerArg + localVar)) 을 리턴한다. 여기서 클로져의 값과 그 사용은 4개의 식별자에 따라서 작동하고 이 식별자들은 각각 엄격하게 해석되어진다. (역주: 즉, 왜 그렇게 해석되는지.. 나름의 이치가 있다는 얘기구낭.. )

전역 변수인 globalVar 변수에 의해 참조되는 함수를 globalVar(2) 를 통해 실행한다고 생각해보자. 새로운 실행 문맥이 만들어지고, 또 하나의 Activation 객체(앞으로 이것을 “ActInner1” 이라고 부를 것이다.) 생성된다. 이 객체는 스코프 체인 맨앞에 삽입되고, 실행된 함수 객체의 [[scope]] 프로퍼티에 의해 참조된다.  이 ActInner1 은 innerArg 라는 이름의 프로퍼티가 주어지고, 공식적인 파라메타로써 그 argument 값 2가 할당된다. 이 새로운 실행 문맥의 스코프 체인은 ActInner1 -> ActOuter1 -> global object 순서가 된다.

스코프 체인은 표현식 ((arg1 + arg2 ) / (innerArg + localVar)) 의 값을 리턴받기 위해 식별자를 해석한다. 여기서 그 식별자들의 값은 스코프 체인에 있는 객체의 순서대로 객체의 프로퍼티들을 찾아서 해석하고 결정할 것이다.

스코프 체인에 있는 첫번째 객체는 ActInner1 이고, 이 객체는 값이 2인 innerArg 프로퍼티를 가지고 있다. 나머지 3개의 식별자들은 ActOuter1 객체의 프로퍼티에서 찾을수 있다.
즉, arg1 는 2, arg2는 4 그리고 localVar은 8 이다.
그래서 그 함수호출은 ((2+2) / (2+8)) 의 값을 리턴하게 될것이다.

이것을 두번째 전역변수인 secondGlobalVar 변수에 의해 참조되는 함수 secondGlobalVar(5)와 비교해 보자. 새로운 실행문맥 Activation 객체를 “ActInner2” 라고 하면, 이 실행문맥의 스코프 체인은 ActInner2 -> ActOuter2 -> global object 순서가 된다. ActInner2 객체는 값 5를 갖는 innerArg를 리턴하고, ActOuter2 객체는 arg1,arg2 그리고 localVar를 각각 12,3 그리고 8의 값으로 리턴을 하므로, 그 값은 ((12+3) / (5+8)) 이 될것이다.

secondGlobalVar 을 다시 호출하면, 새로운 Activation 객체가 새로 생성된 실행문맥안의 스코프 영역 맨 앞에 추가 될것이다. 하지만 ActOuter2 는 여전히 새로 생성된 실행문맥안에서도 유효하게 되어, Activation 객체 다음에 ActOuter2 객체가 오게 되고, 역시 arg1, arg2 그리고 localVar의 값을 ActOuter2 객체에서 리턴받게 될것이다.

이것이 바로 ECMAScript 에서 중첩 함수를 가지고, 유지하면서 공식적인 파라메타로써 접근 가능하고 선언된 내부 함수와 지역변수들이 어떻게 사용되는지를 보여주는것이다.
각각의 스코프 체인은 내부 중첩 함수가 생성된 실행 문맥 안에서 새로이 추가적인 Activation 객체를 생성하고 사용된다. ECMAScript 스펙에는 스코프 체인은 유한하다고 정의하고 있다. 하지만 그 스코프의 길이는 제약이 없다. 이것을 구현할때는 아마 약간의 실용적인 제약이 부과 되어있을텐데, 현재까지는 아무런 크고작은 문제들이 보고되지 않았다. 중첩함수를 품는 다는 것은 잠재적으로 그 의도를 가지고 있다고 봐야할 것이다. (역주 : 머 중첩함수를 함수로 가지지 말라는 의미같다. 중첩함수를 가진다면, 분명히 그 명확한 의도를 가지고 코딩을 해야한다는 의미??)

클로져를 가지고 무엇을 할수 있을까?

이상하게 들릴찌도 모르겠지만, 그 답은 어떤것도 그리고 무엇이든 할수 있다. 내가 예기하고자 하는건 클로져는 ECMAScript에서 어떤것을 모방하기 위해 허용했다는 것이다.
그래서 그 한계는 무엇을 만들고자 하는가에 따라 다르고, 구현도 마찬가지다. 약간 난해하긴 하지만 아마도 실질적으로 보다 나은 먼가를 해볼수 잇을것이다.

Example1 : setTimeout with Function References

클로져의 일반적인 사용은 함수를 실행하기에 앞서 그 함수를 실행하기 위한 파라메타로서 제공하는 것이다. 예로들면, 일반적인 웹 브라우져 환경에서 setTimeout 함수의 첫번째 인자로써 클로져를 제공할수 있다는 얘기다.

setTimeout 은 첫번째 인자로 넘어온 함수의 실행을 조절하고 두번째 인자로 넘어온 값을 milliseconds로 인식하고 interval 로 사용한다. 만약에 어떤 코드 조각을 setTimeout 에서 사용하기를 원한다. 이것은 setTimeout 함수를 호출하고, 첫번째 인자를 함수객체의 참조로 넘겨준다. 그리고 두번째 인자를 밀리세컨 인터벌로 사용한다. 하지만 함수 객체에 넘겨지는 참조자는  setTimeout 함수의 예정된 실행안에서는 파라메타를 제공할수 없다.

하지만, 코드는 또 다른 함수객체를 호출할수있다. 이 함수 객체는 내부에 중첩된 함수 객체를 참조하는 참조자를 리턴값으로 같는 함수객첵이다. 이 내부의 중첩된 함수 객체는 참조에 의해서 setTimeout 함수에 넘겨진다. 내부함수 실행에 사용되는 파라메타들은 함수 호출의 리턴값으로 넘겨받는다. setTimeout 은 넘겨받는 인자 없이 중첩된 내부함수를 수행하지만, 그 내부함수는 여전히 외부함수에게 호출의 리턴값으로 넘겨주는 파라메타들에 여전히 접근할수 있다.
(역주: 먼소린지… -_- )

function callLater(paramA, paramB, paramC){
    /*  
     함수 표현식을 갖는 익명 내부 함수를 만들고 이것을 참조자로 리턴한다.
    */
    return (function(){
        /* 이 내부 함수는 setTimeout 과 함께 실행 되어진다.
            그리고 이분이 실행되어 질때, 이것은 읽을수 있고, 수행되고,
            파라메타들을 외부 함수에 넘겨준다.
        */
        paramA[paramB] = paramC;
    });
}

…
/*
   함수를 호출한다. 이 함수는 실행문맥안에서 생성된 내부 함수 객체를 가르키는 참조자를 리턴해줄것이다. 넘겨준 파라메타들은 결과적으로 외부함수의 인자로 실행될때, 내부함수가 사용할것이다. 내부 함수객체를 가르키는 리턴된 참조자는 지역변수에 할당된다.
*/
var functRef = callLater(elStyle, “display”, “none”);
/*
  setTimeout 함수를 호출하고, 첫번째 인자로 할당한 내부 함수를 참조자를 functRef 변수로 넘겨준다.
*/
hideMenu=setTimeout(functRef, 500);

Example 2: Associating Functions with Object Instance Methods (객체 인스턴스의 메소드를 갖는 연관 함수)

함수객체를 가르키는 참조자가 할당되어, 함수의 파라메타로 유용하게 사용되는 경우는 많다.
하지만 실행시간에 할당되기 전까지는 쓸수가 없다.

아래예제는 어떤 특별한 DOM 엘리먼트와의 상호 작용을 하기위해 설계된 자바스크립트 객체를 나타낸다. 이 객체는 doOnClick, doMouseOver, doMouseOut 메소드를 가지고 있고, 이런 메소드들을 DOM 엘리먼트에 상응하는 이벤트들이 발생한다. 하지만 수 많은 자바스크립트 객체 인스턴스들이 서로다른 DOM 엘리먼트로 부터 생성되고, 어떤 객체 인스턴스들은 어떻게 자신들이 코드안에서 쓰여질것인지 알수 없다. 즉, 어떤 전역객체가 어떤 인스턴스의 참조로 쓰일지 알수 없기 때문에 객체 인스턴스들이 어떻게 스스로가 전역적으로 참조가 되는지 알지못한다.

그래서 이 문제는 특정 자바스크립트 객체의 인스턴스를 가지는 이벤트 핸들링 함수를 실행함으로써, 어떤 객체의 메소드가 실행되었는지를 판별해 알아낸다.

아래 예제는 약간은 일반적인 클로져 기반의 함수를 사용한다. 이 함수는 엘리먼트 이벤트 핸들을 가지고 있는 객체 인스턴스를 포함한다. 정리하면, 이벤트 핸들러의 실행은 그 객체 인스턴스의 특정 메소드를 호출하고, 이때 이벤트 객체와 그 객체 메소드와 연관된 엘리먼트의 참조자를 인자로 넘겨주고, 그 메소드의 리턴값을 넘겨받는다.

<span class="commentJS"><blockquote><pre><span class="commentJS">/* <br>이벤트 핸들러와 연관된 객체 인스턴스의 일반적인 함수.<br><br>내부 함수는 이벤트 핸들러로써 사용되는 내부함수를 리턴 한다.<br>객체 인스턴스는 obj 파라메타를 넘겨받는다. 그리고 그 메소드 이름은 <br>객체가 methodName 파라메타를 넘겨줄때 호출된다.<br>*/</span>
function associateObjWithEvent(obj, methodName){
    <span class="commentJS">/* <br>     그 리턴된 내부 함수는 DOM 엘리먼트를 위한 이벤트 핸들러로 사용된다.
    */</span>
    return (function(e){
        <span class="commentJS">/* The event object that will have been parsed as the - e -
           parameter on DOM standard browsers is normalised to the IE
           event object if it has not been passed as an argument to the
           event handling inner function:-
        */</span>
        e = e||window.event;
        <span class="commentJS">/* The event handler calls a method of the object - obj - with
           the name held in the string - methodName - passing the now
           normalised event object and a reference to the element to
           which the event handler has been assigned using the - this -
           (which works because the inner function is executed as a
           method of that element because it has been assigned as an
           event handler):-
        */</span>
        return obj[methodName](e, this);
    });
}

<span class="commentJS">/* This constructor function creates objects that associates themselves
   with DOM elements whose IDs are passed to the constructor as a
   string. The object instances want to arrange than when the
   corresponding element triggers onclick, onmouseover and onmouseout
   events corresponding methods are called on their object instance.
*/</span>
function DhtmlObject(elementId){
    <span class="commentJS">/* A function is called that retrieves a reference to the DOM
       element (or null if it cannot be found) with the ID of the
       required element passed as its argument. The returned value
       is assigned to the local variable - el -:-
    */</span>
    var el = getElementWithId(elementId);
    <span class="commentJS">/* The value of - el - is internally type-converted to boolean for
       the - if - statement so that if it refers to an object the
       result will be true, and if it is null the result false. So that
       the following block is only executed if the - el - variable
       refers to a DOM element:-
    */</span>
    if(el){
        <span class="commentJS">/* To assign a function as the element's event handler this
           object calls the - associateObjWithEvent - function
           specifying itself (with the - this - keyword) as the object
           on which a method is to be called and providing the name of
           the method that is to be called. The - associateObjWithEvent
           - function will return a reference to an inner function that
           is assigned to the event handler of the DOM element. That
           inner function will call the required method on the
           javascript object when it is executed in response to
           events:-
        */</span>
        el.onclick = associateObjWithEvent(this, "doOnClick");
        el.onmouseover = associateObjWithEvent(this, "doMouseOver");
        el.onmouseout = associateObjWithEvent(this, "doMouseOut");
        ...
    }
}
DhtmlObject.prototype.doOnClick = function(event, element){
    ... <span class="commentJS">// doOnClick method body</span>.
}
DhtmlObject.prototype.doMouseOver = function(event, element){
    ... <span class="commentJS">// doMouseOver method body.</span>
}
DhtmlObject.prototype.doMouseOut = function(event, element){
    ... <span class="commentJS">// doMouseOut method body.</span>
}

그래서 이 DhtmlObject의 인스턴스는 내부적으로 어떻게 다른 코드에 의해 쓰이고, 전역 네임스페이스와 다른 DHtmlObject 인스턴스와의 충돌 신경쓰지 않고도, 스스로 DOM 엘리먼트를 연관시킬수 있다.

Example 3: Encapsulating Related Functionality

클로져는 서로 의존적이거나 밀접한 관계가 있는 코드를 묶고 우연히 발행하는 상호작용의 위험들을 최소화하는 방법으로 추가적인 스코프를 만들수 있다.

(역주: 아~ 길다… 이번 예제는 그냥 읽어보고, 내가 이해한다로 그냥 쓰겠음..)