Part. 6 Closure

기리보이-skit

function outerFn() {
  let outerVar = 'outer';
  console.log(outerVar);
  
  function innerFn() {
    let innerVar = 'inner';
    console.log(innerVar);
  }
  return innerFn; 
  
  outerFn()();	//outer, inner (외부 함수와 내부 함수를 연달아 호출)
  let innerFn = outerFn();	// outer (외부 함수의 리턴값을 innerFn이라는 변수에 담는다)
  innerFn();	//inner (내부 함수가 담긴 innerFn을 호출한다)

• 클로저: 외부 함수의 변수에 접근할 수 있는 내부 함수 또는 이러한 작동 원리를 일컫는 용어
  ex ) 위의 function innerFn() { } 는 클로저 함수
  클로저 함수 안에서는 지역함수(innerVar), 외부 함수의 변수(outerVar), 전역 변수(globalVar)의 접근이 전부 가능하다.

유용한 클로저 예제

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

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

var add 5 = adder (5);
// undefined
add5(6)
// 11

var add10 = adder (10);
//undefined
add10(10)
20

//x의 값을 고정해놓고 재사용할 수 있다.

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

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

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

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

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

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


let counter1 = makerCounter ();
counter1.increment();
counter1.increment();
counter1.getValue();	// 2

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

// 두 카운터에 각기 다른 privateCounter를 다루면서 private Counter를 밖으로 노출시키지 않는다

---

---

Arrow Function