Closure

 

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

let makeTag = tag => content => {
  return `<${tag}>${content}</${tag}>`;
}
let div = makeTag('div');
console.log(div('closure')) //'<div>closure</div>'

let p = makeTag('p');
console.log(p('currying')) //'<p>currying</p>'





//클로저 모듈(변수를 외부 함수 스코프 안쪽에 감추어, 변수가 함수 밖에서 노출되는 것을 막는 방법)

let makeCounter = () => {
  let value = 0;
  return{
    increase: () => {value = value + 1},
    decrease: () => {value = value - 1},
    getValue: () => value
  }
}

let counter = makeCounter();
counter.increase();
counter.increase();
counter.getValue(); //2

let deCounter = makeCounter();
deCounter.decrease();
deCounter.decrease();
deCounter.getValue(); //-2



// 클로저의 단점: 일반 함수였다면 함수 실행 종료 후 
//가비지 컬렉션(참고 자료: MDN '자바스크립트의 메모리 관리')대상이 되었을 객체가, 
//클로저 패턴에서는 메모리 상에 남아 있게 됩니다. 
//외부 함수 스코프가 내부함수에 의해 언제든지 참조될 수 있기 때문입니다. 
//따라서 클로저를 남발할 경우 퍼포먼스 저하가 발생할 수도 있습니다. 
//자바스크립트는 가비지 컬렉션을 통해 메모리 관리를 합니다. 
//객체가 참조 대상이 아닐 때, 가비지 컬렉션에 의해 자동으로 메모리 할당이 해제됩니다