자바스크립트 기본 - 클로저

클로저 - https://opentutorials.org/course/743/6544

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

함수안에서만 사용되는 함수를 선언할 때 외부함수, 내부함수를 이용하여 사용한다.

---

function outter(){

    function inner(){

        var title = 'coding everybody'; //내부함수에 정의되어 있는 지역변수이다.

        alert(title);

    }

    inner();

}

outter();

---

outter는 외부함수, inner는 내부함수이다.

아래는 클로저의 코드예제이다.

---

function outter(){

    var title = 'coding everybody'; //외부함수에 정의되어 있는 지역변수이나 내부함수에서 사용할 수 있다. 이러한 것을 클로저라고 한다.

    function inner(){

        alert(title);

    }

    inner();

}

outter();

---

외부함수는 외부함수의 지역변수를 사용하는 내부함수가 소멸될 때까지 소멸되지 않는 특성을 가지고 있다.

---

function outter(){       //outter라는 외부함수를 지정

    var title = 'coding everybody';  

    return function(){    //내부함수를 정의하고 리턴하고 있다.    

        alert(title);

    }

}

inner = outter(); //외부함수가 종료되었지만 외부함수의 title에 접근할 수 있다.

inner();

---

Private variable : 정보를 아무나 수정하지 못하도록 하는것이다.

---

function factory_movie(title){ //외부함수가 실행되어 return값이 호출되면 함수는 끝났기 때문에 title에 접근이 불가하나 내부함수, 즉 메소드 get_title, set_title에 의해서 title의 값에 접근 할 수 있다.

    return {          //객체 안에 함수가 정의되어 있다. 메소들들은 내부함수이다.

        get_title : function (){

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

        },

        set_title : function(_title){

            title = _title

        }

    }

}

ghost = factory_movie('Ghost in the shell'); //factory_movie의 return값을 ghost에 담는다.

matrix = factory_movie('Matrix');   //factory_movie의 return값을 ghost에 담는다.

 

alert(ghost.get_title()); //Ghost in the shell 알럿창

alert(matrix.get_title()); //Matrix 알럿창

 

ghost.set_title('공각기동대'); //ghost의 set_title을 바꾼다.

 

alert(ghost.get_title()); //공각기동대 알럿창

alert(matrix.get_title()); //Matrix 알럿창, ghost의 title만 바꾸었기 때문에 matrix의 title은 변하지 않는다.

---

private variable (비밀변수)로 title을 지정하는 것에 대한 장점은 아래와 같다.

title이라는 변수를 아무나 수정할 수 없다. title값을 외부에서 어떤 값으로 사용하든 factory_movie 함수안의 내용에 영향을 주지 않는다.

Private variable을 실수로 사용한 예

---

var arr = []

for(var i = 0; i < 5; i++){

    arr[i] = function(){

        return i;

    }

}

for(var index in arr) {

    console.log(arr[index]());

}

---

코드를 실행시키면 5가 5번나온다.

id라는 외부함수의 지역변수에 접근하여 i의 값을 올려주면서 값을 체크한다.

---

var arr = []

for(var i = 0; i < 5; i++){

    arr[i] = function(id) {

        return function(){

            return id;

        }

    }(i);

}

for(var index in arr) {

    console.log(arr[index]());

}

---

코드를 실행시키면 0,1,2,3,4 차례대로 나온다.