• 2021. 9. 16.

    by. 문익점

    반응형

    클로저를 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 enviromentplus 함수조합으로 인해서 클로저가 됩니다.

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

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

    이점

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

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

    반응형