TIL 221202

이정익·2022년 12월 2일
0

TIL

목록 보기
25/27
post-custom-banner

클로저

클로저란

함수와 그 함수가 선언된 렉시컬 환경의 조합.

왜 사용하는가?

일반적으로 state를 안전하게 은닉 하기 위해
무슨소리냐?

let num = 0;
const increase = function () {
  return ++num;
};
console.log(increase()); // 1
num = 100; // 치명적인 단점이 있다.
console.log(increase()); // 100
console.log(increase()); // 100

이런 불상사가 발생하지 않게 하기 위해서

const counter = (function () {
  //카운트 상태 변수
  let num = 0;
  // 클로저인 메서드(increase, decrease)를 갖는 객체를 반환한다.
  // property는 public -> 은닉되지 않는다.
  return {
    increase() {
      return ++num;
    },
    decrease() {
      return num > 0 ? --num : 0;
    },
  };
})();
console.log(counter.increase()); // 1
console.log(counter.increase()); // 2
console.log(counter.decrease()); // 1
console.log(counter.decrease()); // 0

변수를 함수안에 숨기고, 그 변수를 조작하는 함수를 리턴해서 관리한다.
너무 좋고 안전한 방법. 자주 써먹도록 노력해봐야지

아래는 함수형 프로그래밍에서 클로저를 사용하는 예시

const counter = (function () {
  let counter = 0;
  return function (aux) {
    counter = aux(counter);
    return counter;
  };
})();

function increase(n) {
  return ++n;
}
function decrease(n) {
  return --n;
}
console.log(counter(increase));
console.log(counter(increase));

console.log(counter(decrease));
console.log(counter(decrease));
profile
주니어 프론트엔드 엔지니어로 한걸음 나아가는 중입니다.
post-custom-banner

0개의 댓글