Closure

  • func1 함수 안에 func2 함수가 정의되어 있을때 func2 (inner) 함수에서 func1 (outer) 함수의 scope에 접근할 수 있다는 것을 의미한다
function func1() {
  const name = 'test';

  function func2() {
    console.log(name);
  }

  return func2;
}

const func = func1();
  • 위와 같은 함수가 있을때 func에서는 func1에 있는 name에 접근이 가능하다. Garbage Collector에서 사용되고 있는 주소가 있으면 sweep을 하지 않기 때문에 가능하다.

Closure는 언제 사용되는가?

1. 상태 유지

const toggle = () => {
  let isShow = false;

  return function () {
    isShow = !isShow;
    return isShow;
  };
};
  • 클로저를 사용하면 요렇게 isShow 의 상태가 유지된다. React의 useState훅이 클로저를 응용한 내용인듯하다

2. 정보 은닉

const increment = () => {
  let count = 0;

  return function () {
    return ++count;
  };
};
  • 이렇게 하면 외부에서는 count의 값을 직접 접근해 변경할 수 없기에 count는 private 변수의 느낌으로 사용이 가능하다

3. 커링

function func1(x) {
  return function func2(y) {
    return x * y;
  };
}

const func = func1(5);
func(1); //5
func(2); //10
func(3); //15
  • 재사용 때문에 사용 되는 커링이라는 개념에서 사용된다

끝

😊