[javaScript] 클로저(Closure)란,,?

자바스크립트 클로저(Closure) 개념 이해하기.

 

 

 

'클로저(Closure)'는 자바스크립트뿐만 아니라 다른 언어에서도 사용되는 특성이다.

특히 함수를 일급 객체로 취급하는 언어(함수형 언어 functional language)에서 주요하게 사용되는 특성이라고 하니 잘 알아두자 !!  

 

 

자바스크립트 또한 함수를 일급 객체로 취급한다.  함수를 일급 객체로 취급하는 것은 함수를 다른 함수의 인자로 넘길 수도 있고, return으로 함수를 통째로 반환받을 수도 있음을 의미한다. 

이점을 유의하여 클로저를 이해해보자 !

 

 

 

 

 

 

클로저(Closure)

: 이미 생명 주기가 끝난 외부 함수의 변수를 참조하는 함수

 

 

 

자바스크립트 클로저의 간단한 전형적인 구조를 보고 이해해보자 !!

function outerFunc() {
        var a = 123;
    
        return function() {
    	    /* a와 arguments를 활용한 로직 */
        }
}

var newFunc = outerFunc();

newFunc();

외부 함수의 호출이 이루어지고 외부 함수에서 새로운 함수가 반환이 된다. 여기서 반환된 함수가 클로저이다.

a는 자유 변수(Free variable)로서 클로저로 참조되는 외부 변수이다.

 

 

 

 

 

예제를 통해 클로저를 제대로 이해해 보자 !

function outerFunc(val1,val2) {
        var local = 10;
        function innerFunc(innerVal){
            console.log((val1+val2)/(innerVal + local));
        }
        return innerFunc;
}

var test = outerFunc(10, 20);

                                        // 결과값
test(10);                               // 1.5
test(20);                               // 1
test(30);                               // 0.75

outerFunc() 함수는 종료되었지만,

innerFunc() 내부 함수의 [scope]로 참조되므로 가비지 컬렉션의 대상이 되지 않고, 여전히 접근 가능하게 살아있다.

따라서 test(n)의 형태로 계속 호출을 하여도, innerFunc()에서 참조하고자 하는 변수 local에 접근할 수 있다.

 

 

 

 

 

이처럼 클로저는 자바스크립트의 중요한 기능이지만, 대부분의 클로저에서는 스코프 체인에서 뒤쪽에 있는 객체에 자주 접근하므로 성능을 저하시키는 이유로 뽑히기도 한당 ! ㅠㅠ 게다가 클로저를 사용한 코드가 메모리 부담도 더 많아진다고 한다. 따라서 클로저를 사용할 때는 영리하게 사용하는 법도 꼭 알아둬서 유용하게 사용해야겠다 !!!

 

 

 

클로저를 사용할 때 주의사항도 조만간 예제와 함께 정리해야겠다 ! 다른 예제들에서 클로저를 보니 또 색다른 거 같다,, 

좀 더 이해를 하고 정리해야겠당 !! ㅠ^ㅠ  클로저 알 거 같으면서도 알 수 없눼ㅔ,,,,