• Closure의 의미와 Closure가 가지는 Scope Chain을 이해할 수 있다
• Closure의 유용하게 쓰이는 몇 가지 코딩 패턴을 이해할 수 있다

클로저(Closure)

외부 함수의 변수에 접근할 수 있는 내부 함수를 말한다. 또는 이러한 작동 원리를 일컫는 용어이다. 클로저 함수 안에서는 지역변수(innverVar), 외부 함수의 변수(outerVar), 전역 변수(globalVar)의 접근이 모두 가능하다.

function outerFn(){
  let outerVar = 'outer';
  console.log(outerVar);
  
  function innerFn(){         // 클로저 함수(클로저 패턴) 
    let innerVar = 'inner';
    consol.log(innerVar); 
  }
  return innerFn; 
}
let globalVar = 'global'; 
let innerFn = outerFn(): 
innerFn(); 

유용한 클로저 예제

1. 커링: 함수형 프로그래밍의 대표적인 예제. 함수 하나가 n개의 인자를 받는 대신에 n개의 함수를 만들어 각각 인자를 받게 하는 방법

function adder(x){
  return function(y){
    return x + y; 
  }
}
adder(2)(3); //5 (x에 변수 넣으면 function(y)가 리턴, function(y)는 x값에 y더한 것 

// 여기서 x의 값을 고정해두고 재사용이 가능
let add100 = adder(100); 
add100(2); // 102 
add100(10); //110 
// adder는 함수를 생성하는 함수가 되어버렸다 

let add5 = adder(5); 
add5(2); //7 

2. 외부 함수의 변수가 저장되어서 마치 템플릿 함수처럼 사용할 수 있다.

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

// 외부함수의 변수 privateCounter를 내부함수에서 사용하고 있다 
function makeCounter(){
  let privateCounter = 0; 
  
  return {
    increment: function(){
      privateCounter++;
    },
    decrement: function(){
      privateCounter--; 
    }, 
    getValue: function(){
      return privateCounter;
    }
  }
}

let counter1 = makeCounter();  //counter1은 객체 
counter1.increment(): //메소드처럼 사용 가능해짐 
counter1.increment(); 
counter1.getValue(); // 2

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

//counter1과 counter2에 있는 value는 서로 영향을 전혀 주지 않는다.  
// (각각 privateCounter를 가지고 있기 때문에 - 재사용이 가능해짐 ) 
// privateCounter라는 값을 스코프 법칙에 따라 밖에서 수정할 수 없다. 
// 대신 increment나 decrement와 같은 함수로 간접적으로 바꿀 수 있다.