자바스크립트 클로저 (Closures)

자바스크립트 변수(variables) 지역(local) 또는 전역(global) 범위에 속할 수 있습니다.

전역 변수(Global variables)는 closures로 지역(개인) (local (private))변수로 만들 수 있습니다.


전역 변수 (Global Variables)

함수는 다음과 같이 함수 내부에(inside) 정의된 모든 변수에 액세스할 수 있습니다:

함수는 함수내에 정의된 변수에 액세스할 수 있습니다:

Example

그러나 함수는 다음과 같이 함수 외부에 정의된 변수에도 액세스할 수 있습니다:

마지막 예제에서, a전역(global)변수입니다.

웹페이지에서, 전역변수는 윈도우 객체(window object)에 속합니다.

전역 변수는 페이지(그리고 윈도우)에 있는 모든 스크립트에 의해 사용될 수(그리고 변경될 수) 있습니다..

첫 번째 예제에서, a지역(local) 변수입니다.

지역 변수는 정의된 함수내에서만 사용할 수 있습니다. 이것은 다른 함수와 다른 스크립팅 코드에서 숨겨짐니다.

같은 이름의 전역 변수와 지역 변수는 다른 변수입니다. 하나를 수정한다고 해도, 다른 것은 수정되지 않습니다.


변수 수명 (Variable Lifetime)

전역 변수는 응용프로그램(윈도우 / 웹페이지)이 살아있는 동안 살아 있습니다.

지역 변수는 수명이 짧습니다. 이것은 함수가 호출될 때 생성됩니다. 그리고 함수가 종료되면 삭제됩니다.


카운터 딜레마 (Counter Dilemma)

어떤 것의 카운팅하기 위한 변수를 사용하고자 합니다. 이 카운터를 모든 함수에 적용할 수 있기를 바랍니다.

전역 변수를 사용할 수 있고, 함수는 이 카운터를 증가시킵니다:

전역 변수로 카운팅.

0

카운터는 add() 함수에 의해서만 변경될 수 있습니다.

문제는 페이지에 있는 모든 스크립트가 add() 호출없이 카운터를 변경할 수 있습니다.

함수 내에 카운터를 선언하면, 아무도 add() 호출없이 카운터를 변경할 수 없습니다:

지역 변수로 카운팅.

0

이것은 작동하지 않았습니다. add() 함수를 호출할 때마다, 카운터는 1로 설정됩니다.

자바스크립트 inner 함수가 이것을 해결할 수 있습니다.


자바스크립트 중첩 함수 (Nested Functions)

모든 함수는 전역 범위(global scope)에 액세스할 수 있습니다.

실제로 자바스크립트에서 모든 함수는 “함수 위의” 범위에 액세스할 수 있습니다.

자바스크립트는 중첩된 함수(nested functions)를 지원합니다. 중첩된 함수(Nested functions)는 “함수 위의” 범위에 액세스할 수 있습니다.

이 예제에서, 내부 함수(inner function) plus()는 부모 함수의 counter 변수에 대한 액세스 권한을 갖습니다:

Example

외부에서 plus() 함수에 도달할 수 있다면, 이것이 카운터 딜레마(counter dilemma)를 해결할 수 있습니다.

또한 counter = 0을 한 번만 실행하는 방법을 찾아야 합니다

closure가 필요합니다.


자바스크립트 클로저(Closures)

자체 호출 함수(self-invoking functions)를 기억합니까? 이 기능은 무엇을 할까요?

지역 변수로 카운팅.

0

예제 설명

변수 add에는 자체 호출 함수(self-invoking function)의 반환값이 할당됩니다.

자체 호출 함수((self-invoking function))는 한 번만 실행됩니다. 이것은 카운터를 0으로 설정하고, 함수 표현식(function expression)을 반환합니다.

이 add는 함수가 됩니다. “멋진(wonderful)” 부분은 부모 범위(parent scope)에 있는 counter에 액세스할 수 있다는 것입니다.

이를 자바스크립트 클로저(closure)라고 합니다 . 이것으로 함수가 “private” 변수를 가질 수 있습니다.

카운터는 익명 함수의 범위(scope of the anonymous function)로 보호되며, add 함수만을 사용해서 변경할 수 있습니다.

출처: JavaScript Closures

답글 남기기