JavaScript

클로저

클로저

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

내부함수

자바스크립트는 함수 안에서 또 다른 함수를 선언할 수 있다. 아래의 예제를 보자. 결과는 경고창에 coding everybody가 출력될 것이다.

function outter(){
    function inner(){
		var title = 'coding everybody';	
		alert(title);
	}
	inner();
}
outter();

위의 예제에서 함수 outter의 내부에는 함수 inner가 정의 되어 있다. 함수 inner를 내부 함수라고 한다.

내부함수는 외부함수의 지역변수에 접근할 수 있다. 아래의 예제를 보자. 결과는 coding everybody이다.

function outter(){
    var title = 'coding everybody';  
    function inner(){        
    	alert(title);
	}
	inner();
}
outter();

위의 예제는 내부함수 inner에서 title을 호출(4행)했을 때 외부함수인 outter의 지역변수에 접근할 수 있음을 보여준다.

클로저

클로저(closure)는 내부함수와 밀접한 관계를 가지고 있는 주제다. 내부함수는 외부함수의 지역변수에 접근 할 수 있는데 외부함수의 실행이 끝나서 외부함수가 소멸된 이후에도 내부함수가 외부함수의 변수에 접근 할 수 있다. 이러한 메커니즘을 클로저라고 한다. 아래 예제는 이전의 예제를 조금 변형한 것이다. 결과는 경고창으로 coding everybody를 출력할 것이다.

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

예제의 실행순서를 주의깊게 살펴보자. 7행에서 함수 outter를 호출하고 있다. 그 결과가 변수 inner에 담긴다. 그 결과는 이름이 없는 함수다. 실행이 8행으로 넘어오면 outter 함수는 실행이 끝났기 때문에 이 함수의 지역변수는 소멸되는 것이 자연스럽다. 하지만 8행에서 함수 inner를 실행했을 때 coding everybody가 출력된 것은 외부함수의 지역변수 title이 소멸되지 않았다는 것을 의미한다. 클로저란 내부함수가 외부함수의 지역변수에 접근 할 수 있고, 외부함수는 외부함수의 지역변수를 사용하는 내부함수가 소멸될 때까지 소멸되지 않는 특성을 의미한다.

조금 더 복잡한 아래 예제를 살펴보자. 아래 예제는 클로저를 이용해서 영화의 제목을 저장하고 있는 객체를 정의하고 있다. 실행결과는 Ghost in the shell -> Matrix -> 공각기동대 -> Matrix 이다.

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

위의 예제를 통해서 알 수 있는 것들을 정리해보면 아래와 같다.

1. 클로저는 객체의 메소드에서도 사용할 수 있다. 위의 예제는 함수의 리턴값으로 객체를 반환하고 있다. 이 객체는 메소드 get_title과 set_title을 가지고 있다. 이 메소드들은 외부함수인 factory_movie의 인자값으로 전달된 지역변수 title을 사용하고 있다.

2. 동일한 외부함수 안에서 만들어진 내부함수나 메소드는 외부함수의 지역변수를 공유한다. 17행에서 실행된 set_title은 외부함수 factory_movie의 지역변수 title의 값을 '공각기동대'로 변경했다. 19행에서 ghost.get_title();의 값이 '공각기동대'인 것은 set_title와 get_title 함수가 title의 값을 공유하고 있다는 의미다.

3. 그런데 똑같은 외부함수 factory_movie를 공유하고 있는 ghost와 matrix의 get_title의 결과는 서로 각각 다르다. 그것은 외부함수가 실행될 때마다 새로운 지역변수를 포함하는 클로저가 생성되기 때문에 ghost와 matrix는 서로 완전히 독립된 객체가 된다.

4. factory_movie의 지역변수 title은 2행에서 정의된 객체의 메소드에서만 접근 할 수 있는 값이다. 이 말은 title의 값을 읽고 수정 할 수 있는 것은 factory_movie 메소드를 통해서 만들어진 객체 뿐이라는 의미다. JavaScript는 기본적으로 Private한 속성을 지원하지 않는데, 클로저의 이러한 특성을 이용해서 Private한 속성을 사용할 수 있게된다.

참고 Private 속성은 객체의 외부에서는 접근 할 수 없는 외부에 감춰진 속성이나 메소드를 의미한다. 이를 통해서 객체의 내부에서만 사용해야 하는 값이 노출됨으로서 생길 수 있는 오류를 줄일 수 있다. 자바와 같은 언어에서는 이러한 특성을 언어 문법 차원에서 지원하고 있다.

아래의 예제는 클로저와 관련해서 자주 언급되는 예제다. 

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
5
5
5

위의 코드는 아래와 같이 변경해야 한다.

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

클로저 참고

댓글

댓글 본문
작성자
비밀번호
  1. 박인호
    12-14
    수강완료.
  2. Jupi
    와... 친철한 설명 고맙습니다!!
    덕분에 이해 할 수 있었습니다. ^^
    대화보기
    • 홍승우
      for문에서 let를 쓰는것은 지역변수의 유효범위를 더욱더 축소 시키는겁니다.

      차근차근 공부해가는 입장에서 다른 방법들을 많이 생각해보는 것은 좋겠지만 제 경험상.. 공부 과정에서
      많이 햇갈리는 것들이 생길수 있으니까 강의 내용을 차분히 따라가보는게 좋을거 같습니다.
      대화보기
      • 홍승우
        햇갈려하시는 분들이 많은데..
        for(var i = 0; i < 5; i++){
        arr[i] = function(){
        return i;
        }
        }
        이 코드는 arr배열에 익명함수의 설계도를 담은겁니다. 함수를 실행한게 아니라 함수의 설계도를 배열에 저장했다고 보시면 될거 같네요.
        따라서 함수가 실행된건 아니니 각 배열에 담긴 것은 return될 i가 아니라 동작하기전 함수가 들어가 있는겁니다.
        그 후에
        for(var index in arr) {
        console.log(arr[index]()); <-- 여기를 보시면 arr[index]가 아닌 arr[index]()죠. arr가 이미 i를 리턴 받은 상태라면 ()를 쓸 수 없겟죠. 여기서 함수가 실행되는 겁니다.
        }
        여기에서 루프를 통해 각 배열에 담겨있는 함수를 호출하게 되면 함수가 실행 후 return 값 i를 밷게 되는데
        여기서 i는 이미 위에 있는 루프의 동작이 끝난 상태이므로 5가 되겠죠?
        그러므로 5를 5번 리턴하게 되는겁니다.

        여기서 알 수 있는 점은 top에서 루프가 돌 때 i의 값을 배열에 저장하는 것이 아니라 함수를 할당하는 것이기 때문에
        우리는 처음 코드에서 5를 5번 반복하게 된다. 해결책은 처음 루프에서 함수를 즉시실행하면 되는 겁니다.
        for(var i = 0; i < 5; i++){
        arr[i] = function(){
        return i;
        }();
        }
        이렇게 하면 함수가 즉시 실행되서 arr에 담기는 값은 func이 아니라 return값 i겟죠?
        console.log(arr[index]()); 이 루프 또 한 func이 아닌 int이므로 생성자를 빼주면 0,1,2,3,4를 볼수 있겠죠?

        다만 이 강의에서는 클로저에 대해 설명하기 때문에 아래 코드와 같이 작성하여 결과를 도출하는 겁니다.
      • 고스트프리
        // let을 적으니 되네요... 더 헤깔리기 시작하네요^^
        var arr = [];
        for(let i = 0; i<5; i++){
        arr[i] = function(){
        return i;
        }
        console.log(arr[i]);
        }

        for(var index in arr){
        console.log(arr[index]());
        }
      • 고스트프리
        아!~ 저도 마지막이 이해가 안가네요.... 5가 5번찍히는데서 막혔네요... 일단 패스합니다.^^
      • 개발자가 되고싶은 고등학생
        이게 왜 55555야???라는 분들이 많아서 한번 써봅니다.

        var arr = []
        for(var i = 0; i < 5; i++){
        arr[i] = function(){
        return i;
        }
        }
        for(var index in arr) {
        console.log(arr[index]());
        }
        ---------------------설명충↓----------------------------
        arr[i[는 직접 i에 들어있는 값을 접근해서 이용한거고,return i는 i란 변수를 사용할거다!!!!라는 정의만 담겨있는겁니다. 왜나면 arr[i]는 지금 바로 사용하고,함수속 return i는 정의만 해놓은거니까요~
        ->마지막에 i++이 되어 i가 5가 된 것은 이해하셨나요? 5는 return은 되지않았지만 5가되었다는 점!
        그래서 for(var index in arr) 하면 5번 돌게되고, i는 5기 때문에 계속 5가 출력됩니다~~
      • 수복
        우와... 클로저가 자바에서 캡슐화에 해당되는 부분인가요? 마지막 응용부분은 정말 어렵네요~
      • 이장원
        마지막 4강 코드 바뀌기 전과 바뀐 후의 차이와 역할에 대해 조금 더 설명해주실 분 계신가요.. ㅠ
        제가 약간 머리가 멍텅해서,,
      • GoldPenguin
        완료했습니다.
      • GoldPenguin
        완료했습니다.
      • 송성태
        이건 댓글을 남길 수 밖에 없군요.

        [5, 5, 5, 5, 5]가 나오는 이유.
        for 문)
        함수에 있는 변수가 외부 변수에 접근하지 못한다. 그래서 함수 자체가 5번 리턴되어 배열 arr에 저장된다. for 문의 반복이 끝날 때 변수 i는 5가 된다. 이 변수가 배열에 저장된 변수 i에 대입된다. ( i = 5)

        for in문) 배열에 있는 함수를 index 순서로 호출하면 [5, 5, 5, 5, 5] 가 된다.

        [0, 1, 2, 3, 4]가 나오게 하려면,
        내부함수(클로저)를 외부 함수안에 넣어, 내부함수가 외부함수의 변수를 참조할 수 있도록 한다. 외부함수의 입력인자가 내부 함수의 return값이 되도록, 외부함수의 입력인자와 배열의 원소이름 변수를 다르게 설정한다.

        말로 써 놓으니 더 어렵게 느껴네요 ㅠ.ㅠ. 여러분들 덕분에 잘 이해했습니다. 감사합니다!
      • 마지막 예제에서 코드 수정전에 왜 undefined가 아니라 5가 출력되는지 잘 모르겠어요.. 혹시 return 이후에도 i는 전역변수라 값이 계속 바뀔수 있는건가요??
        -----------------------------------------------------
        실제로 arr[i]에 들어가는건 함수이고 함수에서 return 되는건 반복문이 돌아가는 순간의 i의 값이 아니라 그냥 i라는 변수자체가 들어가게되고 for문이 모두 돌아간 이후에 i는 5가 됩니다. (왜 5가 되냐면.. i가 4일때 ++되어 5가 되고 5가 되는 순간 for문을 돌리는 조건에 부적합하여 for문 안의 연산은 시행하지않고 종료 되는것이기에 5입니다.)
        따라서 arr[0]~arr[4]가 반환하는것은 그냥 i라고 생각하시면 됩니다. 그런대 i가 마지막에 5로 초기화 되었으니
        5가 나오는 것이지용.... 제가 이해한것이 맞나요..??ㅋㅋㅋ
      • 우와 도비도비님 해설 덕에 이해했어요. i를 통째로 넣는 생각은 못했네요.
        for loop 이 돌면 i가 define이 안 되어있는데 어떻게 넣은거지 뭐지 5를 어떻게 넣었지 이랬는데
        그냥 컴퓨터가 arr[0] 부터 arr[5]까지 i 라는 놈을 집어 넣었구나 라고 들으니 이해가 가요. 감사합니다!
        대화보기
        • Hyung Keun Kim
          클로저 헷갈리네요 나중에 다시 한번 복습하러 올게요ㅠㅎㅎ
        • 아사다마오리족
          설명고맙습니당
          대화보기
          • Jeong Min Lee
            좋은 강의 감사합니다.
          • sunday00
            i가 4일때 마지막으로 ++ 1을 더하고 끝나므로 5에서 끝납니다.
            다음 루프에서 i값이 5보다 작지는 않으므로(같으므로) 실행되지 않구요.
            대화보기
            • 질문하기전에 아래 댓글을 보니 많이 이해가 됨
              댓글중 1년전의 아래에 좋은 예제가 있음.
            • ㅇㅇ
              중괄호 뒤에 소괄호가 들어가는 이유가 뭐지 하고 끙끙대다가 이제 알았습니다.
              function에서 중괄호까지가 익명함수였군요!
            • bassplayerlee
              안녕하세요, 이고잉님.
              좋은 강의 잘 듣고 있습니다.
              세번째 동영상 예제처럼 내부함수, 외부함수, 클로저를 사용하는 이유는 파이썬에서 지원하는 클래스와 인스턴스 개념을 자바스크립트에서 사용하기 위해서인가요?
              질문 남겨봅니다.

              뒷 강의를 듣다가 추가로 질문드릴게요.
              3번째 동영상 예제는 실제로 사용하는건가요 아니면 예제로써 보여주신 건가요?
              뒷 강의를 듣다보니 생성자와 new 라는 개념을 자바스크립트가 지원하는데 저렇게 코드를 짜는 이유가 있을까 싶어서 질문드립니다.
            • Dong Il Kim
              인자값(argument)는 함수에 넣어줄 값을 말합니다. input... 함수에 어떤 값을 넣고, 기대하는 값이 나오는 프로세스잖아요.

              인자값 -> 함수 -> 값

              함수에 들어가는게 인자값이고, 함수에서 나오는 결과값은 return 뒤에 나오는 값이라고 보면 됩니다.

              function(인자값) {
              연산...
              return 결과값;
              }
              대화보기
              • 3번 예제 제가 이해한게 맞나요??
                //팩토리 무비라는 외부 함수를 만들고 그안에 리턴값으로 객체를 만듬. 그리고 get_title , set_title 이 두가지의 객체 속성을 만들고 그안에 값으로 함수를 메소드로 넣었다. 이 메소드는 내부 함수가 되는것이다. 첫 번째 속성인 get_title 외부 함수인 팩토리 무비의 지역변수인 타이틀을 리턴값으로 받아 그것을 반환하고 함수를 종료하는 것이다.
                // 두 번째 set_title 은 기존에 받은 타이틀을 변경하기 위해 언더바타이틀이라는 새로운 값을 받기 위한 지역 변수를 만들고 set_title 내부 함수를 호출시 title = _title --------------- 즉 기존의 타이틀 값을 새로 입력받은 타이틀 값으로 오버라이딩하는것을 말한다. 이렇게 구조를 설계한 이유는 클로져의 특성을 이용하여 내부 함수에서 외부 함수의 지역 변수 호출 시 외부 함수의 지역변수가 retrun으로 인해 죽더라도 내부 함수의 지역 변수가 호출할 수 있다. 이로인해 다른 곳에서 외부함수의 지역변수인 title 값을 이용하거나 바꾸더라도 내부 함수의 기능에는 문제가 없으며 외부 함수의 지역 변수인 title은 별개적으로 남아있게 된다.
                // 외부 함수의 리턴 객체의 속성의 내부 함수로 만들어논 get_title에 접근하기 위해서는 일단 ghost 라는 변수에 팩토리무비라는 외부 함수를 호출하면서 인자 값으로 타이틀 값을 전달하여 ghost 변수에는 외부 함수의 리턴 값인 객체들이 담겨져 있으며 외부 함수의 지역 변수인 title 에는 팩토리무비라는 외부 함수 호출수 인자로 전달한 'Ghost in the shell' 가 삽입된다. 그리고 get_title이라는 속성의 내부함수안의 return title의 title의 값은 내부 함수 지역에 정의된것이 없기에 외부 함수의 매개변수 즉 지역 변수 title에 삽입된 'Ghost in the shell' 가 들어가고 그 값을 반환하며 함수를 종료한다.
                // 그리고 그것을 접근하여 출력하는 방법은 기능이 담긴 내부 리턴 객체를 삽입한 ghost 변수안에 get_title이라는 내부 함수를 호출하면 전에 받은 외부 함수의 지역 변수의 타이틀 값을 참조하여 반환한 return title;이 담긴 get_title이 실행되며 title값을 출력한다.

                --------------

                그리고 Private 라는 기능? 기술? 을 사용해야하는 이유가 잘 와닿지가 않아요..
                function factory_movie(title){} 의 title은 리턴으로 인하여 종료되어서 Private 가 되는 것인가요?
              • ㅉㅉ머가리하곤
                반복구문 끝나는조건이 5<5일때 끝나잖아요
                그럼 i값은 5인거죠
                대화보기
                • 코딩은어려워
                  질문이 있습니다.. 네번째 영상에서 첫번째 예문에, 왜 55555 가 나오는것인가요? i는 5보다 작다고 정의되어있는데..
                  44444 가 나와야하는것 아닌가요? 0,1,2,3,4.. 마지막 밸류는 4가 되야하는것 아닌가요?
                • 세븐나이츠
                  요새 계속 폭염이라 날씨도 더운데 강의도 점점 어려워지네요 ㅠㅠ
                • greenCup
                  4번 예제의 55555인 이유 : return i 함수는 for문의 i에 접근하지 못한다. for문은 외부함수가 아니므로. 그러므로 arr[i]의 원소들은 01234가 저장되는게 아닌 iiiii가 저장된다. 그래서 for문은 자기 혼자 돌아가다가 끝나고, 끝날 때의 값은 5. 이 5는 for문이 끝나면서 for문을 벗어나게 되므로 5가 i에 적용될 수 있었던 것.

                  이같은 오류를 막고 원래 의도대로 작동시키기 위해, 즉 내부함수의 태생적으로 한계가 있는 활용범위를 넓히는 데 클로저가 활용될 수 있는 사례구만요...
                • Seo Yun Seok Tudoistube
                  저는 제가 이해했다고 믿고 싶습니다ㅠㅠ;; 감사합니다^_____^!!!
                • 도비도비
                  마지막꺼가 왜 5가 다섯번 찍힌건지 이해가 안됐는데, 직접 실행해보고 배열 arr 안에 뭐가 들어있는지 확인하니깐 이해가 되네요..
                  for 문이 돌면서 arr 배열 안에 각각 return 0, return 1, return2, .... 이렇게 for 문 실행 당시의 i 의 정수값이 들어가길 원했던거였는데, 실제론 다섯개 모두 retrun i 로 변수 i 가 그대로 들어가버린거였군요.
                • crable
                  감사합니다. 참 유익하네요.
                • 이승우
                  20170521 완료
                • 김소희
                  function 함수명();

                  괄호안에 들어가는값이 인자라고 들었는데
                  정확히 어떤걸 의미 하는 건가요ㅜㅜ
                  이부분이 너무 헷깔리네용!!!
                • 신입1
                  재밌네요 감사합니다
                • 클로저는 특정 함수를 객체로 취급하여 은닉화, 캡슐화 시키는 프로그래밍 패러다임이다.
                  함수지향, 객체지향언어를 동시에 채택하는 자바스크립트에서 특별히 허용되어 있는 꼼수다. 함수의 인스턴스가 생을 마감하면 함수 안에 저장되어있던 값도 운명을 따라간다. 하지만 반환값이 함수이거나 메서드를 포함하는 객체일 경우, 함수를 지지고 볶으면 놀랍게도 이미 죽어있을 터인 함수 내의 변수를 접근할 수 있다.
                  이 때, 같은 외부함수인 다수의 내부함수는 지역변수를 공유한다. 하지만 외부함수가 실행될 때 마다 지역변수를 공유하는 클로저가 별개로 생성되기 때문에, 다른 인스턴스일 경우 변수를 공유하지 않는다.
                  이로 자바에서 private 접근자가 붙어있는 멤버 변수를 public 메서드로 접근하는 행위를 흉내내는것이 가능하다.

                  제가 빡대리라 네번째 영상은 이해가 잘 안되네요.. 그래도 세개 건진걸로 만족합니다
                • 학생
                  개발자 도구 콘솔 창에서 inner와 outter, title을 입력해 보면 왜 그런지 알 수 있을 것 같습니다.

                  먼저 title을 입력하면 값이 없다고 나옵니다. 하지만, innner를 입력하니 outter의 리턴값인 function(){ alert(title); } 이 출력됩니다.
                  값이 소멸되었다는 것은 title이 없다는 뜻이고 alert(title)이 정상 출력 된다는 것은 outter에 있는 title을 참고하여 나온다는 것 같습니다.(내부함수에서 외부함수의 값을 참고하는 것이 클로저 이므로)
                  대화보기
                  • 최동원
                    설명 중 함수명이 잘못 표기된 부분이 있어 댓글 남깁니다.

                    현재: set_movie와 get_movie 함수가 title의 값을 공유하고 있다는 의미다.
                    수정: set_title과 get_title 함수가 title의 값을 공유하고 있다는 의미다.

                    쉽게 설명해주신 덕에 공부하는데 큰 도움이 되고있습니다. 늘 감사합니다 :)
                  • goupspace
                    프로그램 초심자입니다.
                    마지막 예제가 이해가 안되서 정말 헤맸습니다.
                    아래 댓글들에 정말 많은 도움을 받았습니다.

                    현상을 있는 그대로 받아들이는 것보다
                    원리에 대한 이해를 바탕으로 '왜'라는 의문에 답을 해나가는 것이 가장 중요하다고 생각합니다만
                    ..
                    '왜'에 대한 답변은 아래 댓글들에 상세히 설명 되있으므로
                    저는 '현상'을 볼 수 있는 도움을 드리고자

                    콘솔로그를 이용하여 현상을 확인한 코드를 댓글을 남깁니다.
                    '백문이불여일견'이라고 콘솔창을 통해 눈으로 확인하니 확 와닿네요..
                    재밌기도 하고요..

                    '55555'가 찍히는 코드에 콘솔로그를 추가하여
                    도대체 어떻게 동작하는 것인가를 확인해보았습니다.
                    ------------------------------------------------------------------------------------------------------------
                    <!DOCTYPE html>
                    <html>
                    <head>
                    <meta charset="utf-8"/>
                    </head>
                    <body>
                    <script>
                    var arr = []
                    console.log("START");
                    for(var i = 0; i < 5; i++){
                    console.log("A");
                    arr[i] = function(){
                    console.log("B");
                    console.log("i ===> "+i);
                    return i;
                    }
                    // console.log(arr);
                    // console.log("arr ===> "+arr[i]());

                    }
                    console.log("[for문 END]FINAL return값 i ===> "+i);
                    console.log("[for/in문 START]");
                    for(var index in arr) {
                    console.log("C");
                    console.log("index ====> "+index);
                    console.log("arr ===> "+arr[index]());
                    }
                    </script>
                    </body>
                    </html>
                    ------------------------------------------------------------------------------------------------------------

                    아래 댓글들을 보시고 대충 감을 잡으신 뒤에 위 코드를 돌려서 콘솔로그를 확인하시면
                    이해가 되실 것으로 생각됩니다.

                    위와 같은 방법으로 아래 코드도 참고바랍니다.
                    01234 찍히는 코드입니다.

                    ------------------------------------------------------------------------------------------------------------
                    <!DOCTYPE html>
                    <html>
                    <head>
                    <meta charset="utf-8"/>
                    </head>
                    <body>
                    <script>
                    var arr = []
                    console.log("START");
                    for(var i = 0; i < 5; i++){
                    arr[i] = (function(id){
                    console.log("A");
                    console.log("i ===> "+i);
                    return function(){
                    console.log("B");
                    console.log("id ===> "+id);
                    return id;
                    }
                    })(i);
                    // console.log("[for문]arr ===> "+arr[i]());
                    }
                    console.log("[for문 END]FINAL return값 i ===> "+i);
                    console.log("[for/in문 START]");
                    for(var index in arr) {
                    console.log("C");
                    console.log("index ====> "+index);
                    console.log("arr ===> "+arr[index]());
                    }
                    </script>
                    </body>
                    </html>
                    ------------------------------------------------------------------------------------------------------------

                    회사 때려치고
                    새로운 출발과 함께 웹어플리케이션부터 이고잉님 강의 듣고있는데
                    요즘 정말 재밌네요
                    새로운 것을 알아가는 기쁨이랄까요

                    다들 즐프하십시오.
                  • TravelDreammer
                    http://blog.naver.com......432

                    클로저의 정의를 전달하는 글이기보다는

                    혼자 마지막 강의에 대해 스스로 코드를 해석해보는 시점에서 작성한 글입니다~

                    학생이라 아직 부족한 부분이 많고 첫 블로그 포스팅이니 많은 피드백 부탁드리겠습니다~
                  • egoing
                    물론입니다!
                    대화보기
                    • TravelDreammer
                      안녕하세요 이고잉님
                      마지막 동영상에 대한 내용을 약간의 저만의 설명을 덧붙여서 블로그에 작성을 해도 될까요??
                      출처는 명확히 밝히도록 하겠습니다!
                    • Ruin09
                      좀 혼란스럽네요... 기존에 클래스와 함수로만 이루어진 언어만 다루다보니 함수의 생명주기가 명확하지 않은 느낌입니다. 함수가 return한 다음에도 내부 객체들이 계속 살아있어서 접근 가능한 것으로 봐도 괜찮은건가요? 그럼 함수가 종료되는 일이 없는건가요...?
                    • gcoder
                      예제의 실행순서를 주의깊게 살펴보자. 7행에서 함수 outter를 호출하고 있다. 그 결과가 변수 inner에 담긴다. 그 결과는 이름이 없는 함수다. 실행이 8행으로 넘어오면 outter 함수는 실행이 끝났기 때문에 이 함수의 지역변수는 소멸되는 것이 자연스럽다. 하지만 8행에서 함수 inner를 실행했을 때 coding everybody가 출력된 것은 외부함수의 지역변수 title이 소멸되지 않았다는 것을 의미한다. 클로저란 내부함수가 외부함수의 지역변수에 접근 할 수 있고, 외부함수는 외부함수의 지역변수를 사용하는 내부함수가 소멸될 때까지 소멸되지 않는 특성을 의미한다.

                      //안녕하세요. 두번째 교육아래 글에서 소멸 된다는 말이 어떤 의미인지 모르겠네요. 그럼 마지막 코딩에서 inner();실행했으니깐 이제는 내부함수도 소멸되고 외부함수의 변수도 소멸되는건가요? 소멸된다면 왜 다시 inner();이 실행되나요? 제가 소멸한다는 의미를 다르게 받아들이고 있는것 같은데.. 이 부분 이해한 분 설명 좀 부탁드립니다.
                    • 임지호
                      클로저 : 내부함수가 외부함수의 맥락에서 접근할 수 있는 것.(함수 안에서만 사용하는 함수를 만들 때 유용)
                      - 내부함수 : 함수 안에 함수가 선언되 있는 것
                      - 외부함수 : 내부함수 바깥에 선언된 함수
                      - 내부함수는 외부함수의 지역변수에 접근할 수 있다.
                      - 외부함수가 소멸되도 내부함수는 외부함수의 지역변수에 접근할수 있다.
                      - 프라이빗변수 : 정보를 아무나 수정하는 것을 방지하는 기법(이 기법에 클로저를 사용)
                    • 상구너
                      학생입니다님이 실행하신 코드는 arr[i]를 뜯어보면 function이 아니라 function이 실행된 결과값 0,1,2,3,4 가 들어가있게됩니다. 여기선 클로저특성을 사용했다 보기 어려운거에요. 포문 돌때마다 이미 함수가 실행된거에요
                      대화보기
                      • 마지막 예제는 정말 어렵네요
                      • 김명수
                        정말 감사합니다!! 덕분에 클로져 이해됐어요
                      • 백수
                        var a= outter(){
                        return inner(){}};

                        a()를 실행하면 a는 outter()에서 리턴받은 inner()를 가리키기 때문에 inner()가 실행
                        그리고 inner()가 실행 되면서 outter()에 영향을 줌.

                        전역변수를 사용하게 되면 다른 플러그인과 충돌 위험이 있기때문에 사용을 자제하는데
                        이 closure라는 기술을 활용하면
                        지역변수가 전역변수처럼 함수가 실행될때마다 변하는 private변수로 만들수 있음
                      • 완료!
                        완료! 감사합니다 ㅠ
                      • 카구
                        클로저를 열심히 이해한 학생입니다!!!
                        이고잉님이 클로저를 위해서 설명해주신 두 가지 예제는 context라는 이해가 기반이 되어야 합니다.
                        context란 말그대로 문맥을 의미합니다...

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

                        이 예제에서 for문 내의 function은 for문의 context, 문맥에 접근하지 못합니다!
                        function들은 i를 리턴하는 함수일 뿐인거죠, 아직 호출이 된 상태가 아닌 것입니다.
                        그래서 for(var index in arr)을 통해 로그를 출력하게 되면 함수들이 각각 호출되면서...
                        for문의 context(문맥)이 끝난 시점의 i인 5를 출력하게 되는 것이랍니다!!!

                        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]());
                        }

                        하지만 이처럼 외부함수를 통한 내부함수의 context 접근 (== 클로져)를 사용하게 되면 아래의 for문을 통해 arr[]에 저장된 함수들을 호출하면서 index인 0, 1, 2, 3, 4... 를 던져주게 되는 거죠!! 즉 값을 출력하는 0, 1, 2, 3, 4는 위쪽의 for문의 i를 통해 전달되는 것이 아니라 아래의 for문을 통해서 전달되게 되는 거랍니다!!!
                      • 짱구파워
                        감사합니다~
                      버전 관리
                      egoing
                      현재 버전
                      선택 버전
                      graphittie 자세히 보기