생활 코딩 - 클로저

클로저(closure)는 내부함수가 외부함수의 맥락(context)에 접근할 수 있는 것을 가르킨다. 클로저는 자바스크립트를 이용한 고난이도의 테크닉을 구사하는데 필수적인 개념으로 활용된다.  

 

-> 어려움 : 보고 정의를 봐라

 

먼저 내부함수와 외부함수를 이해해야한다.

내부함수

<script>
            function outter() {
                function inner() {
                    var title = 'coding everybody';
                    alert(title);
                }
                inner();
            }
            outter();
</script>

결과 : coding everybody

어떠한 함수가 있는 함수안에서만 사용? 함수 밖에 선언하면 응집성이 떨어짐 함수안에다 선언하면 그 함수안에만 사용기에 안에 선언한다.

 

작은 박스 내부 큰 박스 외부

 

클로저

<script>
            function outter() {
                var title = 'coding everybody';
                return function () {
                    alert(title);
                }
            }
            inner = outter();
            inner();
 </script>

내부 함수를 리턴하고있다. 아웃터라는 외부함수를 실행한 결과는 inner에 담음 inner를 호출 하면 coding everybody를 출력하게 된다.

 

내부함수는 이미 죽었는데 뭐래 하나도 모르겠어;

 

내부함수를 포함하고있는 외부함수에 접근할 수 있을 뿐 아니라 외부함수를 통해 내부에 접근할 수 있다.

 

조금더 실용적인 예제래;

<script>
            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());
</script>

Matrix 값이 나옴

 

_title은 -> title을 가르킴 그래서 결국 매개변수를 가르킴

 

ghost. / matrix.  출력값을 확인함 첫번째 고스트 두번째 메트릭스

 

그래서 matrix로 감

 

 

실수 방지

자주 실수하는 예제 유명한 예제래

<script>
            var arr = []
            for (var i = 0; i < 5; i++) {
                arr[i] = function () {
                    return i;
                }
            }
            for (var index in arr) {
                console.log(arr[index]());
            }
</script>

포인 문을 이용해서 배열에 담겨있는 값을 하나하나 꺼낸 후에 함수를 호출하면 console.log( i );가 샐행된다.

 

0 - 4 까지가 호출되어야한다. 하지만 5가나오는데? 그래서 return으로 바꿈 그러나 5가 나옴

 

이유는? 

 

외부함수를 정의하고 내부함수가 참조하도록해야함

 

 

고급개발자되려면 이걸 반드시 익혀야한다는데 너무 어렵네연