CodeStates / Closure(클로저)

다음 코드에서 innerFn 함수에 접근할 수 있는 Scope는 총 몇개일까?

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

let globalVar = 'global';
outerFn();

---

그렇다면 다음 코드에서 return innerFn의 값은 무엇일까?

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

---

또, 다음 결과는 무엇일까?

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

outerFn()();
let innerFn = outerFn();
innerFn();

---

• 클로저: 외부 함수의 변수에 접근할 수 있는 내부 함수, 또는 이러한 작동 원리를 일컫는 용어
  

---

유용한 클로저 예제

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

function adder(x) {
  return function (y) {
    return x + y;
  }
}

adder(2)(3);

왜 이게 유용하냐면, x의 값을 고정해놓고 사용할 수 있다.

function adder(x) {
  return function (y) {
    return x + y;
  }
}

adder(2)(3);

let add100 = adder(100);
add100(2);            // 102
add100(10);           // 110

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

---

• 외부 함수의 변수가 저장되어 마치 템플릿 함수와 같이 사용 가능

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

이렇게 하면 보다 유용하게 사용할 수 있다.

---

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

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

이러한 코드가 있을 때 아래 문제를 해결해보자
Q.

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

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