클로저 함수(Closure Function)

1. 클로저란?

• 함수 내부에 만든 지역변수가 사라지지 않고 계속해서 값을 유지하고 있는 상태.

function func(){
    var count = 1;
    //일반 지역변수의 경우 함수 호출이 완료되면 사라지지만.
    
    $("#btn").on("click",
        //클로저를 이용하면 함수호출 완료 후 사라지는
        //지역변수를 사라지지 않는 데이터 저장소로 만들 수 있다.
        function(){
            count++;
            alert("count = " + count);
        }
    };
}

 

• 기본 문법은 아래와 같다.

function 외부함수(){
    var 변수A;
    function 내부함수(){
        변수A 사용;
    }
}

• 엄밀히 말하면 클로저에는 정해진 문법이 없다.
• 그래도 위처럼 내부함수가 외부함수의 변수를 사용하는 형태라 생각하면된다.
• 여기서 내부함수를 클로저 함수라 한다.
• 변수A는 외부함수() 호출이 끝나더라도 사사지지 않고 값을 유지하게된다.

 

2. 예제

• 아래 코드 실행시 출력값을 예측하시오.

functon addCount(){
    var count = 0;
    cout++;
    return count;
}
 
document.write("1. count = " + addCount(), "<br>");
document.write("2. count = " + addCount(), "<br>");
document.write("3. count = " + addCount(), "<br>");

출력

1. count = 1
2. count = 1
3. count = 1

• 변수 count는 addCount()가 호출될때마다 초기화되므로 계속해서 1이 출력된다.

 

클로저를 사용한경우

function createCounter(){
    var count = 0;
    function addCount(){
        count++;
        return count;
    }
    return addCount;
}
 
var counter = createCounter();
 
document.write("1. count = " + counter(), "<br>");
document.write("2. count = " + counter(), "<br>");
document.write("3. count = " + counter(), "<br>");

1. count = 1
2. count = 2
3. count = 3

 

주의

• 내부함수를 리턴하는 구조만이 클로저라 착각할 수도 있다.
• 하지만 아래의 구조도 클로저구조다.

$("#btnStart").click(function(){
    start();
    document.write("시작합니다.");
});
 
function start(){
    var count = 0;
    setInterval(function(){
        count++;
        document.write(count);
    }, 1000);
}

• 버튼을 클릭하면 start()가 실행되면서 지역변수인 count변수ㅏ 만들어지고 setInterval()이 실행된후 함수가 종료된다.
• 이때 지역변수 count도 사라져야하는데. setInterval의 익명함수에서 count를 사용하고 있으므로 값이 계속해서 증가하는것을 볼 수 있다.

 

3. 클로저를 사용하면 좋은 점

• 연관 있는 변수와 기능(중첩함수)를 하나의 함수로 묶어 독립적으로 실행 시킬 수 있다.
• 함수 내부에 데이터가 만들어 지므로 외붕서 수정할 수 없는 보호된 데이터를 만들 수 있다.