[JS] 클로저(예시 위주)

MDB - 클로저
https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Closures

클로저

 

---

 

예시1

//함수 리턴 예시

function outerFn(){
	let outerVar = 'outer';
    console.log(outerVar);
    
    function innerFn(){
    	let innerVar = 'inner';
        console.log(innerVar);
    }
    return innerFn;
}

outerFn();

//위 의 경우 outerVar만 출력,
//innerFn()의 경우 실행되지 않으며 innerFn()이 반환된다!!!!

그렇다면 

1.  outerFn()();
2. let innerFn = outerFn();
3. innerFn();

은 어떤 결과일까?

---

1. outerFn과 innerFn이 모두 실행된다. console.이 2번 출력
2. innerFn 변수에 innerFn()이 할당되고, outerVar 이 출력된다. 
3. innerFn이 실행됨!

여기에서 innerFn()를 클로저 함수 라고 한다.

※ 클로저 함수 안에서는 지역변수와 외부함수의 변수, 전역변수의 접근이 전부 가능하다.

 

 

 

 

클로저 예제

---

1. 커링 - 함수 하나가 n개의 인자를 받는 대신, n개의 함수를 만들어 각각 인자를 받게 하는 방법

function htemlMaker(tag){
	let startTag = '<' + tag + '>';
    let endTag = '</' + tag + '>';
    return function(content){
    	return startTag + content + endTag;
    }
}

let divMaker = htmlMaker('div');
divMaker('code'); // <div>code</dic>
divMaker('states'); // <div>states</div>

let h1Maker = htmlMaker('h1');
h1Maker('Headline'); //<h1>Headline</h1>

 

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

function makeCounter(){
	let privateCounter = 0;
    
    return {
    	increment : funciton(){
        	privateCounter++;
        },
        decrement : function(){
        	privateCounter--;
        },
        getValue: function(){
        	return privateCounter;
        }
    }
}

/***********************************************/

let counter 1 = makerCounter();
counter1.increment();
counter1.increment();
counter1.getValue();

let counter2 = makeCounter();
counter2.increment();
counter2.increment();
counter2.getValue();