정의 : 클로저는 함수와 함수가 선언된 어휘적 환경의 조합이다. 클로저를 이해하려면 자바스크립트가 어떻게 변수의
유효범위를 지정하는지(Lexical scoping)를 먼저 이해해야 한다.
이해가 안되므로 다음 그림과 함께 보자...
여기서 맨 처음의 lexical 환경은 전역으로 된다.
그 이후 addOne을 실행할 경우에 addOne에 대한 새로운 lexical환경이 생기게 되는 것이다.
즉, addOne이란 함수가 Lexical 환경을 참조하는 하위함수가 되는 걸로 이해했다.
만약 addOne(5)가 실행되게 되면 num=5의 값이 인자로 값이 있지만 one이라는 값은
함수 안에는 없다. 결국 없으므로 상위에 있는 전역 Lexical에 있는 one=1이라는 값을 가져와서
6이라는 값이 출력된다.
그래서 좋은 게 뭔데??
다음 예시
위 함수를 보게 되면 [ 전역 lexical환경 ] > [ makeCounter lexical환경 ] 이다.
그렇다면 num이라는 변수는 makeCounter가 실행될 때만 num++가 돼서 값이 오르지만
전역 lexical환경에서는 값은 나오게 되지만 num에 직접적인 접근은 불가하다.
→ 이는 객체지향 프로그램에서 강조하는 캡슐화와 같은 의미를 갖는다.
'FrontEnd(Vue, Javascript, JQuery) > 이론' 카테고리의 다른 글
Web Browser 동작원리 Re (0) | 2024.06.21 |
---|---|
JavaScript 동작 원리 (0) | 2024.06.21 |
Vue 기본 파일 분석 (2) | 2024.06.17 |
SPA vs MPA - CSR vs SSR (0) | 2024.06.14 |
Vue - package.json (0) | 2024.06.06 |