[JavaScript] 내부함수와 외부함수, 그리고 '클로저'

 

클로저는 어떤 함수에서 선언한 변수를 참조하는 내부에서 발생하는 현상이다.

함수 내부에 함수를 작성할 때 마다 클로저를 생성한 것

 

 

아래에 클로저의 예시들을 소개하면서

좀 더 자세히 클로저에 대해 이해 할 수 있도록 정리해 보았다.

 

 

클로저가 발생하는 경우 

 

어떤 함수가 호출되고 실행컨텍스트가 종료되면 그 함수와 내부 변수들은 가비지 컬렉터의 수집 대상이 된다.

가비지 컬렉터는 어떤 값을 참조하는 변수가 하나라도 있다면 그 값을 수집하지 않는다.

 

 

경우 - 1 

아래의 예시는

내부함수가 외부함수 실행 종료 후에도

가비지 컬렉터에 의해 사라지지 않고 계속 호출 할 수 있게 되는 예시이다.

함수 outer에게 inner은 내부함수이고, 함수 inner에게 outer은 외부함수이다.

outer와 내부 변수들은 함수가 종료되었으니 가비지 컬렌터의 수집 대상이 되지만,

inner는 외부함수 outer의 변수인 a를 참조하며 outer의 return값은 외부함수 자체인 inner이다.

 

이렇게 되면 outer2는 outer에서 반환하는 inner함수를 참조하므로

inner함수는 종료되고도 가비지 컬렉터의 수집대상에서 제외된다.

 

이와같이 지역변수를 참조하는 내부함수가 외부로 전달된 경우,

정확히 예를 든다면, 외부함수의 변수를 참조하는 내부함수가 외부함수 자체의 return 값일 경우

외부함수의 변수가 외부함수의 실행컨텍스트가 종류된 이후에도 참조가 가능한 경우를 이야기 한다.

( * 변수나 함수의 실행결과가 아닌 지역변수를 참조하는 외부함수 자체가 return 된 경우 * ) 

 

 

클로저와 메모리 관리

클로저일 경우에는 어딘가에 참조되어있기 때문에 가비지 컬렉터가 수집해가지 않아 메모리를 사용한다.

하지만 참조 카운터가 0이 되면 필요성이 없어져 가비지 컬렉터가 수거해 가기 때문에

참조되고 있는 변수에 null 또는 undefined를 할당하면 된다.

 

 

 

 

경우 - 2 , 3

위의 경우에는 외부객체인 window메서드 setInterval에서

inner의 외부 변수인 a를 참조하고 있으므로 클로저이고,

 

아래의 경우에는 외부 객체인 addEventListener에서

외부 변수인 count를 참조하므로 클로저이다

 

 

 

즉,

클로저란 ? 

클로저는 어떤 함수에서 선언한 변수를 참조하는 내부에서 발생하는 현상이다.

간단히 보면 변수의 유효범위에 관련된 이야기지만, 

외부함수의 변수가 외부함수의 실행컨텍스트가 종류된 이후에도 참조가 가능한 현상을 말한다.

 

---

✔︎ 참고

[ 코어 자바스크립트  - 저자 정재남 ]