클로저 정의

클로저는 javascript의 고유의 개념이 아니며
클로저의 MDN의 정의는 클로저는 함수와 그 함수가 선언되었을때 렉시컬 환경(Lexical environment)과의 조합이다

즉 클로저는 반환된 내부함수가 자신이 선언됐을 때의 환경(Lexical environment)인 스코프를 기억하여 자신이 선언됐을 때의 환경(스코프) 밖에서 호출되어도 그 환경(스코프)에 접근할 수 있는 함수를 말한다. 이를 조금 더 간단히 말하면 클로저는 자신이 생성될 때의 환경(Lexical environment)을 기억하는 함수다라고 말할 수 있겠다.

클로저는 리턴하는 함수에 의해 스코프(변수의 접근 범위)가 구분된다
클로저의 핵심은 스코프를 이용해서, 변수의 접근 범위를 닫는(closure; 폐쇄)것에 있다 따라서, 함수를 리턴하는 것만큼이나, 변수가 선언된 곳이 중요하다

클로저 예시

const adder = function (x) {
    return function (y) {
        return x + y;
    }
}

const add5 = adder(5); // 외부함수 x에 5대입
add5(7) // 내부함수 y에 7을 대입해서 결과는 12
add5(10) // 내부함수 y에 10을 대입해서 결과는 15

const makeCounter = () => {
  let value = 0;
  
  return {
    increase: () => {
      value = value + 1;
    },
    decrease: () => {
      value = value - 1;
    },
    getValue: () => value
  }
} // increase, decrease, getValue 모두 객체이다
const counter1 = makeCounter()
// 따라서 counter1은 객체로 반환

위 예제에서 makeCounter 함수를 바꾸지 않고 value라는 변수에 값을 새롭게 할당할 수 있을까?
정답은 스코프 규칙에 의해 불가능하다
외부 스코프에서는 내부 스코프의 변수에 접근할 수 없다 라는 규칙에 의해 어떤 경우에도 value는 직접 수정이 불가능하다
다만 리턴하는 객체가 제공하는 메서드를 통해 value값을 간접적으로 조작할 수는 있다
이런걸 정보의 접근 제한 캡슐화라고 부른다

클로저를 통해 불필요한 전역 변수 사용을 줄이고, 스코프를 이용해 값을 보다 안전하게 다룰 수 있다

const makeCounter = () => {
  let value = 0;
  
  return {
    increase: () => {
      value = value + 1;
    },
    decrease: () => {
      value = value - 1;
    },
    getValue: () => value
  }
}
const counter1 = makeCounter()
counter1.increase();
counter1.increase();
counter1.decrease();
counter1.getValue(); // 출력값 1

const counter1 = makeCounter()
counter1.decrease();
counter1.decrease();
counter1.decrease();
counter1.getValue(); // 출력값 -3

이와같이 함수 재사용성을 극대화하여 함수 하나를 완전히 독립적인 부품 형태로 분리하는 것을 모듈화라고 한다
클로저를 통해 데이터와 메서드를 같이 묶어서 다룰 수 있다
즉, 클로저는 모듈화에 유리하다