Closure (클로저)

1. Closure (클로저) 란 ?

  가. 클래스 기반 언어처럼 캡슐화, 모듈화 작업을 수행 할 수 있습니다.

  나. 클로저는 함수와 함수가 선언된 어휘적 환경의 조합입니다.

  다. 함수 밖에서 선언된 변수를 함수 내부에서 사용할 때를 말합니다.

 

function outerFn() {

    let outerVar = 'outer';

    console.log(outerVar);

 

    function innerFn() {

        let innerVar = 'inner';

        console.log(innerVar);

    }    //  innerFn()  이 부분이 클로저 함수입니다.

         // 이 함수 안에는 지역 변수(innerVar), 외부 함수의 변수(outerVar), 전역변수(globalVar)의 접근이 전부 가능합니다.

    return innerFn;

}

 

let globalVar = 'global';

let innerFn = outerFn();

innerFn();   //  inner

 

또 다른 예제를 보겠습니다.

 

function adder(x) {

    return function(y) {

        return x + y;

    }

}

adder(2)(3);  // 5

*  커링 : 함수 하나가 n개의 인자를 받는 대신, n개의 함수를 만들어 각각 인자를 받게 하는 방법입니다.

 

 

function htmlMaker(tag) {

    let startTag = '<' + tag + '>';

    let endTag = '</' + tag + '>';

    return function(content) {

        return startTag + content + endTag;

    }

}

 

 

let divMaker = htmlMaker('div');

divMaker('Java');  // <div>Java</div>

divMaker('Script');  // <div>Script</div>

 

let h1Maker = htmlMaker('h1');

h1Maker('HeadLine');  //  <h1>HeadLine</h1>

* 외부 함수의 변수가 저장되어 마치 템플릿 함수와 같이 사용 가능합니다.

 

 

function makeCounter() {

    let privateCounter = 0;

 

    return {

        increment: function() {

            privateCounter++;

        },

        decrement: function() {

            privateCounter--;

        },

        getValuet: function() {

            return privateCounter;

        }

     }

}

 

let counter1 = makeCounter();

counter1.increment();

counter1.increment();

counter1.getValue();  //  2

 

let counter2 = makeCounter();

counter2.increment();

counter2.decrement();

counter2.increment();

counter2.getValue();  // 1

* 클로저 모듈 패턴 : 변수를 스코프 안쪽에 가두어 함수 밖으로 노출 시키지 않는 방법입니다.

 

 

 

이상으로 Closure(클로저)에 대해서 알아보았습니다.