마이크온블로그닷컴 ::Just Quit your Job!::

RegExp.test() - Boolean 값을 리턴
RegExp.exec() - 매칭된 값을 Array로 리턴
String.split() -
String.match() -
String.replace() -
String.search() -

var str = "테스트 테스트1 테스트2 테스트3 테스트4";
var regx = /테스트\d/;

regx.test(str);   // true
regx.exec(str);  // ["테스트1"]

var str = "테스트 테스트1 테스트2 테스트3";
var regx = /(테스트\d)/;

regx.test(str);   // true
regx.exec(str);  // ["테스트1", "테스트1"]
RegExp.$1;       //  "테스트1"    - test(), exex() 모두 같음.

var str = "테스트 테스트1 테스트2 테스트3";
var regx = /(테스트)\s(테스트\d)/; 

regx.exec(str);   // ["테스트 테스트1", "테스트", "테스트1"]

var str = "테스트 테스트1 테스트2 테스트3";
var regx = /(?:테스트\d)/;

regx.test(str);   // true
regx.exec(str);  // ["테스트1"]
RegExp.$1;       //  ""    - test(), exex() 모두 같음.

var str1 = "No pain, No gain!";
var str2 = str1.replace(/ain/g, "XXX");
// str2 = "No pXXX, No gXXX!"

var str = "테스트 테스트1 테스트2 테스트3";
var regx = /(테스트\d)/g;

regx.exec(str);  // ["테스트1", "테스트2", "테스트3"] 일까요???????

var str = "테스트 테스트1 테스트2 테스트3";
var regx = /(테스트\d)/g;

regx.exec(str);  // 1번 실행, ["테스트1", "테스트1"]
regx.exec(str);  // 연속해서 두번 실행, ["테스트2", "테스트2"]
regx.exec(str);  // 연속해서 세번 실행, ["테스트3", "테스트3"]
RegExp.$1;  // "테스트3"

imeMode 속성은, IE 전용 속성인데,
FF3 에서부터는 해당 속성을 지원해주는듯하다..
https://developer.mozilla.org/En/CSS/Ime-mode

하지만.. 테스트는 안해봤다. 테스트 해본 사람들에 의하면,..
아직 안된다고 하더라..ㅎㅎ

그래서 좀더 크로스 브라우징이 가능한 방법이 없을까?
생각하다가.. Flash 인터페이스를 이용하는건 어떨까 생각해봤다.
아래 링크를 참조하고..
http://kimkijeung.com/entry/IME-Input-Method-Editor

위 링크처럼 가능하다면, 플래시컨테이너 하나 로드해놓고,
인터페이스 함수만들어서, 자바스크립트로 해당 함수를 호출하면
간단히 해결될것같은데..

오늘 집에가서 한번 만들어봐야겠당..ㅋ

반대로, FF에서 한글을 입력 안하게 하는 방법도 있을수 있겠다
편법이지만..
http://blog.hooriza.com/1049

이 부분을 번역할까 말까 한참을 고민했다.
대략 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);

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

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

/* 
이벤트 핸들러와 연관된 객체 인스턴스의 일반적인 함수.

내부 함수는 이벤트 핸들러로써 사용되는 내부함수를 리턴 한다.
객체 인스턴스는 obj 파라메타를 넘겨받는다. 그리고 그 메소드 이름은 
객체가 methodName 파라메타를 넘겨줄때 호출된다.
*/
function associateObjWithEvent(obj, methodName){
    /* 
     그 리턴된 내부 함수는 DOM 엘리먼트를 위한 이벤트 핸들러로 사용된다.
    */
    return (function(e){
        /* 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:-
        */
        e = e||window.event;
        /* 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):-
        */
        return obj[methodName](e, this);
    });
}

/* 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.
*/
function DhtmlObject(elementId){
    /* 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 -:-
    */
    var el = getElementWithId(elementId);
    /* 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:-
    */
    if(el){
        /* 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:-
        */
        el.onclick = associateObjWithEvent(this, "doOnClick");
        el.onmouseover = associateObjWithEvent(this, "doMouseOver");
        el.onmouseout = associateObjWithEvent(this, "doMouseOut");
        ...
    }
}
DhtmlObject.prototype.doOnClick = function(event, element){
    ... // doOnClick method body.
}
DhtmlObject.prototype.doMouseOver = function(event, element){
    ... // doMouseOver method body.
}
DhtmlObject.prototype.doMouseOut = function(event, element){
    ... // doMouseOut method body.
}

function exampleFunction(formalParameter) {
    ....    // function body code
}

var exampleFuncRef = function() {
   ... // function body code
}

function exampleOuterFunction (formalParameter) {
   function exampleInnerFunctionDec() {
      ... // inner function body
   }
     .... // the rest of the outer function body.
}
exampleOuterFunction(5);

/* 전역 변수 y를 만들고 그것이 하나의 객체를 참조한다. */
var y = {x:5}; // x 프로퍼티를 가지는 객체 리터럴
function exampleFuncWith(){
    var z;
    /* 전역 변수에 의해 참조 되는 객체를 y에 추가하고 그것을 스코프 체인 앞에 둔다.    */
    with(y){
        /* 함수 객체를 생성하기 위해 함수식을 평가하고, 지역 변수 z를 함수 객체의 참조로 할당한다.
        */
        z = function(){
            ... // inner function expression body;
        }
    }
    ...
}
/* execute the - exampleFuncWith - function:- */
exampleFuncWith();

원문 출처 : http://www.jibbering.com/faq/faq_notes/closures.html

평소에 일반적인 C,C++,Java,C# 이딴 언어를 주로 사용하다 자바스크립트와 같은 스크립트 언어를 조금만 하다보면, 금방 궁금증이 늘어난다.

과연.. 요놈들은 왜? 이렇게 작동하는걸까? 라는 좀 원초적인 질문이다.

어제 오늘 클로저라는 놈을 제대로 이해하기위해, 각종 아티클들을 찾아보다가..
괜찮은 아티클을 발견하고, 지금 번역은 아니고.. 그냥 해석해서 이해하는 중이다.
사실 클로저라는 놈을 이해하기위해선, 자바스크립트 내부적으로 작동하는 매커니즘을 이해할 필요가 있다..

이름하야, Indentifier Resolution, Execution Contexts, Scope Chains, Property Chain 같은 용어와 내부 매커니즘을 이해해야 한다는 얘기다.

오늘은 그중에서 실행문맥(Execution Contexts)에 대해서 정리해보자.

위에 원문을 A4로 출력하면, 대략 4페이지에 나오는 내용이다.

실행문맥은 ECMAScript 스펙에서 정의 된대로 추상적인 개념이고, 요 스팩을 구현하기 위해서 요구되는 지침정도라고 생각해보면 되겠다. 하지만 스펙에는 어떻게 구현하라는 이야기는 없으므로, 대충 개념만이라도 이해하자.

모든 자바스크립트 코드의 실행은 실행문맥안에서 이루어 진다. 전역 코드가 실행될때는 전역실행문맥이라고 불리는 곳에서 실행된다. 그리고 그 전역실행 문맥 안에 존재하는 각각의 function 들은 그 펑션마다 고유의 실행 문맥이 만들어지고 그 안에서 실행이 된다. eval 펑션은 예외다.

자바스크립트 펑션이 호출되면, 실행문맥안으로 들어가고 그안에서 새로운 펑션이 호출되면, 새로운 실행문맥을 만들고, 그 실행문맥 안으로 들어간다. 그리고 값이 리턴되면, 본래 호출되었던 펑션으로 복귀를 하게 되고, 이값도 리턴이 되면, 실행문맥은 사라진다.
결국 실행문맥이라는 것은 우리가 흔히 메모리 구조를 그릴때 그리는 스택구조와 비슷하다고 보면 되겠다.

일반 실행 문맥
실행문맥이 생성될때, 많은 일들이 순차적으로 일어난다.

전역 실행 문맥

전역 실행 문맥은 arguments 가 없기 때문에 정의된 Activation 객체를 가질필요가 없다는 것이 약간 다르다. 하지만 스코프는 필요로 한다. 전역 실행 문맥의 스코프 체인은 오직 전역 객체 하나만을 가르킨다.

역주) 코드에서 선언된 전역변수는 모두 이 전역객체의 프로퍼티로 들어가기 때문에 사실상 전역객체 하나만 가지고 있는 꼴이 된다.

일반적인 최상위 레벨의 함수 선언들은 전역 실행 문맥의 내부 함수 들로써, 변수 인스턴화 과정을 거친다. 즉, 이 변수 인스턴화 과정을 거치게 되므로, 결론적으로 이 함수들은 전역 객체의 프로퍼티로써 존재하게 된다.  그리고 마지막으로 전역객체는 this 객체를 통해서 참조 될수 있다.