closure

- 실행이 끝난 외부함수의 변수에 접근할 수 있는 내부함수
- 함수가 리턴된 후에도 언제든지 해당 함수 내부에서 선언된 지역변수나 함수를 호출할 수 있는 것
- 내부함수를 접근하는 것이기 때문에 함수 안에 내부함수가 있어야하고, 내부함수가 외부함수를 참조하는 상태여야 한다.

const topLevel = '최상위 변수';

function outer(){
  const innerVal = 'outer의 지역변수';
  console.log(topLevel); // 하위 Scope에서 접근 가능
  console.log(innerVal); // 지역변수는 선언한 함수내에서만 접근 가능

  const fn = function(){
    console.log(innerVal);
  };
  
  return fn; // 내부 함수 리턴
}

const returnFn = outer(); // 내부 함수 fn을 변수로 받음
console.log(topLevel); // 같은 Scope 내에서 접근 가능
returnFn(); // 'outer의 지역변수' 출력

closure가 만들어지는 조건
1. 함수 내부에서 함수를 생성 (중첩함수, 내부함수)
2. 내부함수가 외부함수의 지역변수를 참조

클로저 용법

캡슐화

- 함수 내부에서 선언한 지역변수를 외부에서 접근하지 못하게 하는 것

const Counter = function(){
  // this.count 대신 let count로 선언하여 접근을 막는다.
  let count = 0;
  this.getCount = function(){
    return count;
  }
  this.ride = function(){
    if(count < 40){
      count++;
    }else{
      console.log('정원이 초과되었습니다.');
    }
  }
};

const c = new Counter();
c.ride();
c.ride();

// 접근 불가능
c.count += 40; 

console.log('전체 탑승자', c.getCount());

콜백과 타이머

- 지정된 함수들의 임의의 시간 뒤에 비동기적으로 호출될 때 외부의 데이터에 접근하는 경우

function setTimer(){
  const inner = 100;
  setTimeout(() => {
    console.log(inner);
  }, 1000);
}

setTimer(); // 1초 뒤에 inner 함수 출력

Currying

- 여러개의 인자를 받는 함수를 단일 인자를 받는 함수의 체인으로 호출하도록 바꾸는 함수형 프로그래밍 기법 중 하나
- 매개변수를 나눠서 동작하도록 한다.
- 마지막 인자가 입력될 떄 까지 함수 실행 타이밍을 조절할 수 있다.
- lodash의 _.curry() 함수 사용

// html 파일에 해당 라이브러리 추가
<script src="https://unpkg.com/lodash@4.17.21/lodash.js"></script>

const sum = function(x, y){
  return x + y;
}

// lodash의 curry 함수를 사용해서 sum을 커링
const currySum = _.curry(sum);
console.log(currySum(30)(40));

Partial application

- 부분 적용 함수로, 기존 함수의 매개변수 중 일부를 미리 채워둔 상태의 함수
- 커링된 함수를 일부 단계까지만 호출한 후 반환받은 함수를 나중에 나머지 인자를 전달해서 실행
- lodash 의 _.partial() 함수 사용

// html 파일에 해당 라이브러리 추가
<script src="https://unpkg.com/lodash@4.17.21/lodash.js"></script>

const sum = function(x, y){
  return x + y;
}

const sum100 = _.partial(sum, 100); // sum 함수의 x에 100을 미리 넣어둔다
console.log(sum100(10));  // sum 함수에 나머지 인자를 전달

// y에 값을 미리 넣어두고 싶은 경우
const sum100 = _.partial(sum, _, 100)

bind

- lodash의 _.partial() 함수와 비슷하나 미리 전달하는 인자에 this도 지정하는 기능이 추가됨

메모이제이션

- 이전의 계산 결과를 기억하는 함수
- 함수의 속성값으로 계산 결과를 캐시한다
- 공통 함수로 사용하는 것이 좋다

Function.prototype.memo = function(key){
  // 캐시를 위한 코드
  this._cache = this._cache || {};
  if(this._cache[key] !== undefined){ 
    return this._cache[key];
  }else{
    return this._cache[key] = this(key);
  }
};