[JavaScript][clean-code] 클로저 (Closure)

* Closure (클로저)

[참고 내용]

https://latte1114.tistory.com/298

https://latte1114.tistory.com/365

* 클로저 예시 코드

function add(num1) {
  return function sum(num2) {
    return num1 + num2;
  };
}

const addOne = add(1);
console.log(addOne(3)) // 4

// 1을 넘긴상태로 scope가 기억되기 때문에 4가 호출된다.

• 클로저를 사용한 함수를 보면 괄호가 2개이다.
• 괄호가 모두 호출되면 완벽히 함수가 다 호출되고 종료된다.
• 그말은 즉, 괄호를 한번 실행했기 때문에 add라는 함수는 외부함수만 실행이 된거고 실행된 상태에서 내부의 함수의 환경을 기억하고 있다.
• bind메서드와 비슷한 역할을 한다.
• 똑같은 함수로 실행시킬때마다 개별 환경을 기억할 수 있다.

---

* closure응용 예시

function add(num1) {
  return function(num2) {
    return function(calculateFn) {
      return calculateFn(num1, num2);
    };
  };
}

function sum(num1, num2) {
  return num1 + num2;
}

const addOne = add(1)(2);
const sumAdd = addOne(sum);

* closure응용 예시

const arr =[1, 2, 3, 'A', 'B', 'C'];

function isTypeOf(type) {
  return function(value) {
    return typeof value === type;
  };
}

const isNumber = isTypeOf('number');
const isString = isTypeOf('string');

arr.filter(isNumber); // [1, 2, 3]
arr.filter(isString); // [ 'A', 'B', 'C' ]

* closure응용 예시 (fetch)

function fetcher(endpoint) {
  return function(url, options) {
    return fetch(endpoint + url, options)
      .then((res) => {
        if (res.ok) {
          return res.json();
        } else {
          throw new Error(res.error);
        }
      })
        .catch((err) => console.error(err));
  };
}

const naverApi = fetcher('https://naver.com');
const daumApi = fetcher('https://daum.net');

* closure 예시

• Throttling : 마지막 함수가 호출된 후 일정 시간이 지나기 전에 다시 호출되지 않도록 하는 것
• Debouncing : 연이어 호출되는 함수들 중 마지막 함수(또는 제일 처음)만 호출하도록 하는 것

someElement.addEventListener('click', debounce(handleClick, 500));
someElement.addEventListener('click', throttle(handleClick, 500));

[참고] https://www.zerocho.com/category/JavaScript/post/59a8e9cb15ac0000182794fa