본문 바로가기

FrontEnd(Vue, Javascript, JQuery)/이론

JavaScript - Closure

정의 : 클로저는 함수와 함수가 선언된 어휘적 환경의 조합이다. 클로저를 이해하려면 자바스크립트가 어떻게 변수의

          유효범위를 지정하는지(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