## 클로저 (Closure)
클로저란 자신이 선언된 환경(렉시컬 환경)을 기억하고 있는 함수를 의미한다.
```javascript
function outerFunction(x) {
// 외부 함수의 변수
return function innerFunction(y) {
return x + y; // 외부 변수 x에 접근
};
}
const closure = outerFunction(10);
console.log(closure(5)); // 15
```
위의 상황에서 `const closure = outerFunction(10);` 라인이 실행된 이후 `outerFunction` 의 실행이 종료되었기 때문에 `x` 또한 사라져 접근이 불가능 할 것 같지만 여전히 `x`에 전달된 10이 남아 있어 `closure(5)` 가 15를 반환한다.
이렇게 자신이 선언된 환경의 외부 변수 x를 기억하고 있는 함수 `innerFunction`를 클로저라고 한다.
<!--todo: 렉시컬 환경과 스코프 체인-->
## 장점과 활용
### 데이터 은닉화 (Encapsulation)
사라지지 않는 외부 함수의 데이터는 내부 함수에서만 접근할 수 있는 데이터이기 때문에 외부에서 접근할 수 없는 private 데이터를 만들어야 할 때 클로저를 활용할 수 있다.
```javascript
function createCounter() {
let count = 0; // private 변수
return {
increment: () => ++count,
decrement: () => --count,
getValue: () => count
};
}
```
### 상태 유지
클로저는 변수들을 기억하고 있기 때문에 여러 함수 호출 간에서도 변수의 상태를 유지할 수 있다.
```javascript
function makeMultiplier(multiplier) {
return function(number) {
return number * multiplier;
};
}
const double = makeMultiplier(2);
const triple = makeMultiplier(3);
```
## 관련 문서
- [[클로저와 메모리 누수]]
<!--todo: 렉시컬 스코프-->
<!--todo: 모듈 패턴-->
<!--todo: React hooks와 클로저-->
<!--todo: 이벤트 핸들러에서의 활용-->