[Javascript: 클로저(closure)] 내부함수, 외부함수,

클로저란 내부함수가 외부함수의 맥락(context)에 접근할 수 있는 것을 가리킨다.

 

내부함수와 외부함수

function outter() { // 외부함수
	var title = 'coding everybody'; // 외부함수의 지역변수
	function inner() { // 내부함수
        alert(title); // 내부함수에서 외부함수의 지역변수 접근
    }
    inner();
}
outter();

* 정적 유효범위와의 차이점을 기억할 것! https://jisun-rea.tistory.com/entry/Javascript-%EC%9C%A0%ED%9A%A8%EB%B2%94%EC%9C%84-%EC%A0%84%EC%97%AD%EB%B3%80%EC%88%98-%EC%A7%80%EC%97%AD%EB%B3%80%EC%88%98

 

외부함수가 사용되지 않는 경우에도 내부함수가 외부함수에 접근할 수 있다.

function outter() {
    var title = 'coding everybody';
    return function() {
        alert(title);
    }
}
var inner = outter();
inner(); // 외부함수가 종료되었음에도 불구하고

 

Private variable

function factory_movie(title){ // title 변수를 꼭꼭 숨겨놓고
    return {
        get_title : function (){ // 가져오는 메소드
            return title;
        },
        set_title : function(_title){ // 변경 메소드
            if(typeof _title === 'String') {
                title = _title;
            } else {
                alert('제목은 문자열이어야 합니다.');
            }
        }
    }
}
ghost = factory_movie('Ghost in the shell');
matrix = factory_movie('Matrix');
 
alert(ghost.get_title()); // Ghost in the shell
alert(matrix.get_title()); // Matrix
 
ghost.set_title('공각기동대'); // 외부함수의 지역변수를 변경
 
alert(ghost.get_title()); // 공각기동대
alert(matrix.get_title()); // Matrix

 

클로저의 응용

var arr = [] // 배열
for(var i = 0; i < 5; i++){
    arr[i] = function(){
        return i;
    }
}

// 0 1 2 3 4 를 기대, 하지만
for(var index in arr) {
    console.log(arr[index]()); // 5가 다섯번 출력
}
// 왜냐하면 위의 i값은 외부함수의 지역변수가 아니기 때문이다. 

// 수정된 코드
var arr = []
for(var i = 0; i < 5; i++){
    arr[i] = function(id) { // id 매개변수값에 전달해서
        return function(){
            return id; // 리턴~
        }
    }(i); // 전역변수인 i의 값을 받아서
}

for(var index in arr) {
    console.log(arr[index]()); // 0 1 2 3 4
}