JavaScript closure 개념

일단 읽어보시면 좋을 것 같습니다!

https://developer.mozilla.org/ko/docs/Web/JavaScript/Closures

클로저 - JavaScript | MDN

 

클로저

이미 생명주기가 끝난 객체에 접근할 수 있게 해주는 함수를 클로저라고 합니다.

 

예를 들어서 다음 함수를 봅시다.

function makeFunc() {
      var name = "Mozilla";
      return  function displayName() {
        alert(name);
      }
}
var myFunc = makeFunc(); //myFunc변수에 displayName을 리턴함
myFunc(); //리턴된 displayName 함수를 실행(name 변수에 접근)

makeFunc() 는 displayName()을 return합니다. 

myFunc에는 리턴된 displayName이 들어있습니다.

이미 makeFunc()의 생명주기가 끝났기 때문에(return이 완료됨) 원래는 name변수에 접근할 수 없지만

myFunc()를 실행해보면 name을 참조하여 사용합니다.

 

이렇게 생명주가 끝난 객체에 접근하는 함수를 클로저라고 합니다. 

 

확인해보기

실제로 클로저인지 확인해봅시다.

console.dir(myFunc);

scope밑에 closure에 makeFunc가 있는 것을 확인할 수 있습니다.

 

이때 참조하는 name변수를 자유변수라고 합니다.

 

클로저는 강력한 기능이지만

이미 생명주기가 끝난 객체에 접근하기때문에 메모리에 부담이 갑니다.

 

적절하게 쓰는 것이 중요할 것 같습니다!