클로저 (Closure) 란 무엇인지 설명해주세요.

클로저란 무엇인가요?

• 함수에서 반환된 내부 함수가 이미 콜스택 영역에서 제거된 외부 함수 영역의 참조를 잃지 않고 기억하는 것을 말합니다.
• 함수 내부에 [[Scopes]] 라는 프로퍼티가 있기에 가능합니다.
  • 이는 자바스크립트 코드로는 접근이 불가능하지만, 실행 컨텍스트에서의 Lexical Environment 를 기억하고 있습니다.

function outer() {
  let count = 0;

  return function inner() {
    return count++;
  };
}

const inner = outer();
console.log(inner()); // 0
console.log(inner()); // 1
console.log(inner()); // 2

클로저의 장점은 무엇인가요?

메모리 효율적이다.

• 매 호출간 상태를 유지해야 하는 함수를 작성해야 할 때, 전역 환경에 별다른 변수를 만들지 않고 함수만 넘겨 상태를 유지할 수 있기 때문에 메모리 효율적입니다.

private 멤버를 만들 수 있다.

• 종료된 외부 함수의 스코프는 오직 클로저에서만 접근 가능하기 때문에 내부 함수에서만 접근 가능한 private 변수를 만들 수 있습니다.

작은 애플리케이션을 만들 수 있다.

• 내부적으로 상태가질 수 있는 만큼 클로저 함수 자체가 하나의 애플리케이션이 될 수도 있습니다.
  • 값의 생산과 소비가 모두 가능해집니다.
• 이는 제어 영역을 모두 클로저 함수에서 가져갈 수 있다는 뜻인데, 이를 통해 자바스크립트에서 UI 로직과 제어 로직을 분리할 수 있습니다.
  • 하지만 더 강력한 제너레이터가 있기 때문에 굳이 클로저를 쓸 필요는 없다고 생각합니다.

커리 함수를 만들 때 도움이 됩니다.

function curry(fn) {
  return function curried(...args) {
    if (args.length >= fn.length) {
      return fn.apply(this, args);
    }
    return function (...moreArgs) {
      return curried.apply(this, args.concat(moreArgs));
    };
  };
}

function add(a, b, c) {
  return a + b + c;
}

const curriedAdd = curry(add);
const add5 = curriedAdd(5);
const add5and6 = add5(6);
console.log(add5and6(7)); // 18

클로저의 단점은 무엇인가요?

복잡하다.

• 자바스크립트의 스코프 정책을 잘 이해하고 있는 개발자가 아니라면, 코드를 이해하기 쉽지 않다.

메모리 누수가 있을 수 있다.

• 의도적으로 변수를 참조할 수도 있지만, 의도치 않게 어떤 객체나 변수를 참조해버리면 메모리 누수가 발생한다.

디버깅이 어렵다.

• 버그가 생겨난 경우에는 복잡한 구조를 이해해야 버그를 고칠 수 있기 때문에 디버그가 쉽지 않다.