[JavaScript] closure

javascript 변수를 공부하며 scope와 closure를 접해 하는 정리 자바스크립트를 이해하기 위해선 클로저를 알아야 한다.

클로저는 함수와 함수가 선언된 어휘적 환경의 조합이다. 지난 스코프를 업로드할 때 정리했던 어휘적 범위 지정(Lexical scoping)를 알아야 한다. 렉시컬 스코프는 함수의 선언 위치에 따라 호출값이 달라진다는 개념이다.

클로저는 내부 함수가 외부 함수 맥락에 접근할 수 있다는 개념으로 인지하고 일단 넘어가자.

closure

외부 함수에 내부 함수가 접근할 수 있을 뿐만 아니라, 외부 함수가 종료(return)된 이후에도 내부 함수를 통해 접근할 수 있다는 특징.

function cafe(title){
    return {
        get_title : function (){
            return title;
        },
        set_title : function(_title){
            title = _title
        }
    }
}

americano = cafe('starbucks');
latte = cafe('ediya');
 
alert(americano.get_title()); // starbucks
alert(latte.get_title()); // ediya
 
americano.set_title('coffeebean');
 
alert(americano.get_title()); // coffeebean
alert(latte.get_title()); // ediya

• 두번째 americano가 호출됐을 때 값이 변한 것을 통해
  get_title 메소드와 set_title 메소드가 title이라는 같은 매개변수를 공유하고 있음을 알 수 있고,
  외부 함수가 실행될 때마다 새로운 지역 변수를 포함하는 클로저가 생성됨을 알 수 있으며
  americano와 latte는 서로 완전히 독립된 객체가 됐음을 알 수 있다.

또한, 함수 cafe의 지역변수 title은 정의된 객체의 메소드인 get_title과 set_title에서만 접근 가능하다.
JavaScript는 기본적으로 Private한 속성을 지원하지 않는데, 클로저의 이러한 특성으로 사용할 수 있다.