-
[Javascript] Closure■ Front-End/- JavaScript & TypeScript 2019. 6. 22. 09:00
클로저는 반환된 내부함수가 자신이 선언됐을 때의 환경(Lexical environment)인 스코프를 기억하여 자신이 선언됐을 때의 환경(스코프) 밖에서 호출되어도 그 환경(스코프)에 접근할 수 있는 함수를 말한다. 이를 조금 더 간단히 말하면 클로저는 자신이 생성될 때의 환경(Lexical environment)을 기억하는 함수다
예시
위 코드를 실행 컨텍스트로 표현하면 아래와 같다.
사실 아직까지 업무에 closure를 적용해본 경험은 없다.
closure를 적용할만한 기능이 있지 않고, 특히 주니어 개발자에게 closure를 실무에 적용해보는건 아직 어렵다(=두렵다);;
예제
클로저를 이용한 간단한 예제로는 카운터가 있다.
위 코드를 실행하면, 변수 increase에 할당된 즉시 실행 함수가 호출된다.
그래서 변수 increase에는 function () { return ++counter; }가 할당된다. 이 함수는 자신이 생성됐을 때의 렉시컬 환경(Lexical environment)을 기억하는 클로저다.
따라서 변수 counter는 자신을 참조하는 함수가 사라질 때까지 유지되고, increase가 실행될 때마다 counter 변수가 계속 초기화되지 않는다.(즉시 실행함수에서 이미 한번 실행되었기 때문에)
그리고 counter 변수는 함수 내부에 존재하는 변수이기 때문에 외부의 접근에 의해 변경될 일이 없어서 안정적이다.
참고 사이트
https://poiemaweb.com/js-closure
'■ Front-End > - JavaScript & TypeScript' 카테고리의 다른 글
[Javascript] this에 대하여 (0) 2019.07.23 [Javascript] Hoisting 호이스팅 (0) 2019.07.23 [Javascript] 실행 컨텍스트(Execution Context) (0) 2019.06.21 [WEB] 세션(Session)과 쿠키(Cookie) (0) 2019.06.21 [ES6] iterator, generator, async/await에 대하여 (0) 2019.06.20