클로저

내부함수와 외부함수

소스 출처 : 생활코딩 (https://opentutorials.org/course/743/6544)

function outter(){

var title = 'coding everybody'; // 외부함수의 지역변수 title

function inner(){

alert(title);                // 내부함수에서 외부함수의 지역변수 title에 접근이 가능하다

}

inner();

}

outter();                            // 결과 : coding everybody

point! 내부함수는 외부함수의 지역변수에 접근이 가능하다!

클로저란?

내부함수가 외부함수의 컨텍스트에 접근할 수 있는 것을 의미한다.

외부함수의 호출과 실행이 끝나서 외부함수가 소멸된 후에도

내부함수가 외부함수의 변수에 접근할 수 있다.

즉, 외부함수는 외부함수의 지역변수를 사용하는 내부함수가 소멸될 때까지 소멸되지 않는다!

function outter(){

var title = 'coding everybody';    // 외부함수의 지역변수 title

return function(){

alert(title);

}

}

inner = outter();                       // 외부함수 호출-실행-소멸

inner();                                // 결과 : coding everybody

inner = outter(); 에서 outter 함수는 실행이 끝났으므로 이 함수의 지역변수인 title은 소멸되어야 한다.
그러나 다음 행 inner();에서 coding everybody가 출력됨을 보았을 때, 외부함수의 지역변수 title이 소멸되지 않았음을 알 수 있다.
클로저란, 내부함수가 외부함수의 지역변수에 접근할 수 있고, 외부함수는 외부함수의 지역변수를 사용하는 내부함수가 소멸될 때까지 소멸되지 않는 특성을 의미한다.





function makeId() {
  var lastId = 0;
  
  return function() { return ++lastId; };
}

var id = makeId();
//makeId()의 호출이 종료, 그렇지만 함수의 변수인 lastId은 계속 사용된다
document.writeln('id: ' + id() + '<br/>');        // id : 1
document.writeln('id: ' + id() + '<br/>');        // id : 2
document.writeln('id: ' + id() + '<br/>');        // id : 3
document.writeln('id: ' + id() + '<br/>');        // id : 4
document.writeln('id: ' + id() + '<br/>');        // id : 5
document.writeln('<br/>');

makeId의 지역변수 lastId은 'var id = makeId();' 에서 정의된 객체 id의 메소드에서만 접근 할 수 있는 값이다.

이 말은 lastId의 값을 읽고 수정 할 수 있는 것은 makeId 메소드를 통해서 만들어진 객체 뿐이라는 의미다.

은닉(Information Hiding)

클로저라는 특성은 객체 내 어떤 변수를 외부에서 접근하지 못하게 하는 은닉 기능을 제공한다.(private)

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

ghost = factory_movie('Ghost in the shell');
matrix = factory_movie('Matrix');

alert(ghost.get_title());
alert(matrix.get_title());

ghost.set_title('공각기동대');

alert(ghost.get_title());
alert(matrix.get_title());

factory_moive의 지역변수 title은 리턴 객체에서 정의된 메소드에서만 접근할 수 있는 값이다.

즉, title에 접근 가능한 객체는 factory_movie 메소드를 통해서 만들어진 리턴 객체뿐이다.

자바스크립트는 자바처럼 private 속성을 지원하지 않지만 클로저를 통해 은닉 기능을 사용할 수 있다.