Closure (클로져)

 

클로저 : 외부 함수의 변수에 접근할 수 있는 내부 함수

(또는 이러한 작동 원리를 일컫는 용어)

• 클로저 함수 안에서는 지역 변수 (innerVar), 외부 함수의 변수(outerVar), 전역 변수(GlobarVar)의 접근이 전부 가능

   

function outerFn(){ 
let outerVar = 'outer'; 
console.log(outerVar);

function innerFn(){ 
let innerVar = 'inner'; 
console.log(innerVar); 
} // --> innerFn은 클로저 함수 
return innerFn;
}

outerFn() // --> 'outer'
outerFn()() // --> 'outer' 'inner'
let innerFn = outerFn(); // --> 'outer'
innerFn() // --> 'inner'

 

그래서 이 클로저를 어디에 쓰느냐?

 

---

유용한 클로저 예제

 

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

function adder(x){ 
return function(y){ 
  return x + y; 
  } 
} 
adder(2)(3); // 5 
let add100 = adder(100); 
// ** 장점 ** x 값을 고정해놓고 재사용할 수 있다. 
add100(2); // 102 
add100(10); // 110

⇒ 템플릿 함수로 쓸 수 있다. (html에서 유용)

 

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

let divMaker = htmlMaker('div'); // --> function(content){ ... }
divMaker('안녕하세요'); // --> "<div>안녕하세요</div>

 

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

function makeCounter(){
  let privateCounter = 0;

  return {
    increment : function() {
      privateCounter++;
    },
    decrement : function() {
      privateCounter--;
    },
    getValue : function() {
      return privateCounter;
    }
  }
}

/*
point1!
이 때 privateCounter을 함수 밖에서 수정할 수 없다.
이 특성을 용이하게 활용 가능
*/

// 위 함수에 따른 문제
let counter1 = makeCounter();
counter1.increment();
counter1.increment();
counter1.getValue(); // 2

let counter2 = makeCounter();
counter2.increment();
counter2.decrement();
counter2.increment();
counter2.getValue(); // 1

/*
point2!
counter1 과 counter2의 privateCounter 변수를
각각 다르게 가질 수 있기 때문에 재사용이 가능하다.
(클로저 모듈 패턴)
*/