[JS] 클로저

개요

클린코드 자바스크립트 (장Poco) 강의 중 정리...

 

예시 1

클로저: 실행된 외부 함수로 인해, 내부 함수의 환경을 기억하는 것

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

const addOne = add(1);
const addTwo = add(2);

addOne(3) // 4
add(1)(3) // 4

 

예시 2

함수를 넘기는 것도 가능

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

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

function multiple(num1, num2) {
  return num1 * num2;
}

const addOne = add(5)(2); // function(anonymous)
const sumAdd = addOne(sum); // 7
const sumMultiple = addOne(multiple); // 10

 

예시 3

if문이 떡칠될 수 있는 걸 클로저로 간편하게 나타냄 (?_?)

function log(value) {
  return function(fn) {
    fn(value);
  }
}

const logFoo = log('foo');

logFoo(v => console.log(v));
logFoo(v => console.info(v));
logFoo(v => console.warn(v));
logFoo(v => console.error(v));

 

예시 4 (활용 예시)

// closure 적용 전

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

const isNumber = value => typeof value === 'number';
const isString = value => typeof value === 'string';

arr.filter(isNumber);

 

value => typeof value를 리팩토링

 

// closure 적용 후

const aaa = [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);

 

예시 5

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

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

naverApi('/webtoon').then(res => res);
daumApi('/webtoon').then(res => res);

 

예시 6

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

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