8d_Closure

Closure 클로저
"외부 함수의 변수에 접근할 수 있는 내부 함수"
'함수를 리턴하는 함수'는 클로저 패턴의 일반적인 특징, 정의와 혼동하지 말 것!
eg.
function outerFn(){
let outerVar = 'outer';
console.log{outerVar);

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

let globalVar = 'global';
let innerFn = outerFn();
innerFn();

클로저 함수(innerFn()) 안에서는 지역 변수(innerVar), 외부 함수의 변수(outerVar), 전역 변수(globalVar)의 접근이 전부 가능합니다

클로저 함수를 활용하는 예

1. 커링 : 함수 하나가 n개의 인자를 받는 대신, n개의 함수를 만들어 각각 인자를 받게 하는 방법
   eg.
   function adder(x){
   return function(y){
   return x+y;
   }
   }

adder(2)(3); //5

커링을 사용하는 이유 : x 값을 고정해두고 재사용할 수 있다
eg.
let add100 = adder(100);
add100(2); //102

2. 외부 함수의 변수가 저장되어 마치 템플릿 함수와 같이 사용 가능
   eg.
   function htmlMaker(tag){
   let startTag='<'+tag+'>';
   let ensTag='</'+tag+'>';
   return function(content){
   return startTag+content+endTag;
   }
   }

let divMaker=htmlMaker('div');
divMaker('안녕하세요') //"

"
let spanMaker=htmlMaker('span')
spanMaker('오오') //"안녕하세요"

3. 클로저 모듈 패턴: 변수를 스코프 안쪽에 가두어 함수 밖으로 노출시키지 않는 방법
   장점 함수 안의 변수를 안전하게 저장해둘 수 있음
   한 함수를 두 가지 변수에 지정해두어서 각각 사용할 수 있음
   eg.
   function makeCounter(){
   let privateCounter=0;
   return{
   increment: function(){
   privateCounter++;
   },
   decrement: function(){
   privateCounter--;
   },
   getValue: 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