코어 자바스크립트 5. 클로저 (closure)
Closure
: combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment).
In other words, a closure gives you access to an outer function's scope from an inner function.
In JavaScript, closures are created every time a function is created, at function creation time.
그것을 둘러싼 환경(lexical environment)을 참조하여 함께 묶여진 함수의 결합물.
다른 말로, 클로저는 당신이 내부 함수에서 외부 함수의 범위에 접근할 수 있게 한다.
자바스크립트에서 클로저는 함수 생성 시점에 함수가 생성될 때마다 생성된다.
내부함수와 Lexical Environment의 조합
A의 lexical environment와 내부함수 B의 조합에서 나타나는 "특별한 현상"
컨텍스트 A에서 선언한 변수를 내부함수 B에서 참조할 경우에 발생하는 특별한 현상
중첩함수에서 내부함수가 외부함수의 환경을 참조하는 현상이 함수가 종료된 후에도 유지되는 현상
컨텍스트 A에서 선언한 변수 a를
참조하는 내부함수 B를
컨텍스트 A가 외부로 전달할 경우,
컨텍스트 A가 종료된 이후에도
변수 a가 사라지지 않는 현상
함수 종료 후에도 사라지지 않는 지역 변수를 만들 수 있다!
클로저의 활용
- 상태 유지
- 전역 변수의 사용 억제
- 정보의 은닉
React Hook에서의 클로저
- useState에서 setState로 state 값을 업데이트 할 때 과거의 value와 현재의 value를 비교한다.
이때 과거의 value를 가지고 있어야하므로 closure를 활용한다.
