2015년 10월 2일 금요일

JavaScript closures 기본 개념

JavaScript closures 개념


function add()
{
    var count = 0;
    function plus()
    {
       count += 1;
    }
    plus();
    return count;
}

add();
add();
add();

add() 함수를 호출하여 count 값을 출력해보면 항상 1 이 나온다.
count는 add() 함수 안에서 지역변수로 add()함수를 실행 하면 count = 0 으로 초기화 하기 때문이다.



function add()
{
    var count = 0;
    function plus()
    {
       return count += 1;
    }    
    return plus;
}

var myFun = add();
myFun();
myFun();
alert(myFun());

add()함수 내부에서 리턴값으로 plus함수 자체를 리턴해주면 외부에서 count값을 증가 시켜주는것이
가능하게 된다.
myFun 변수에 plus의 함수자체를 할당하여 외부에서 호출이 가능하게 된 것이다.
이로써 count값이 3으로 표시 될것이다. 이것을 활용하여 이벤트를 할당하거나 callback개념으로
JavaScript closures를 사용할 수도 있다. 자세한 사용방법은 아래 참조 사이트를 참조하기 바란다.


참조 사이트
https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Closures

http://www.w3schools.com/js/js_function_closures.asp