실행 컨텍스트 with Closure - 3

클로저를 mdn에서 찾아보면 아래와 같이 설명되어있다.

A closure is the combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment)

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures

함수와 그 함수를 둘러싼 Lexical enviroment의 combination. 즉 조합이라고 설명되어 있습니다. 이는 실행컨텍스트 1탄의 스코프 체인이랑도 연관이 있습니다.

fucntion person() {
    var first = "joon";

    function firstName() {
        return frist;
    }
}

person()의 컨텍스트에서 존재하는 firstName() 함수는 스코프 체인으로 인해 first 변수에 접근이 가능한데 이처럼 firstName() 함수와 그 함수를 둘러싼 person()이라는 컨텍스트의 조합을 클로저라고 할 수 있습니다.

예시

var plusTemp= function () {
    var temp = 1;
    var plus = function () {
        return ++temp;
    }
    return plus
}

var doPlus = plusTemp();
console.log(doPlus()); // 2
console.log(doPlus()); // 3

plusTemp 함수는 plus 함수를 리턴합니다. plusTemp 함수는 plusTemp의 Lexical enviroment와 plus 함수의 조합으로 인해서 클로저가 됩니다.

var doPlus = plusTemp(); // doPlus는 temp 식별자에 대한 정보(=1)도 갖고 있는 상태

즉 이 코드가 실행이 되면 doPlus는 plusTemp의 Lexical enviroment를 가지고 있기 때문에 temp는 1이라는 정보를 계속 가지고 있게 됩니다. 그래서 밑 두 줄에서 doPlus()를 두번 호출 하였을 때 2와 3 이 출력되게 되는 것입니다. 함수와 식별자 정보를 담은 Lexical enviroment를 조합해서 가지고 있는 개념이기 때문입니다.

이점

클로저는 함수와 특정 변수들 즉 변수들의 정보를 가지고 있게 할 수 있기 때문에 함수 종료 후에도 사라지지 않는 지역 변수를 만들 수 있다는 이점을 가지고 있습니다. 그래서 커링(curring)이라는 재밌는 함수도 만들 수 있습니다.

https://sujinlee.me/currying-in-functional-javascript/