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. 브이에스코드
    두 분 답변 감사합니다~
  2. 브이에스코드
    답변 감사합니다
    대화보기
    • 춤추는망고
      만약에 말이죠...?

      정말 보안이 철저한 회사에서 다니는데,

      외부함수라는 회사건물의

      내부함수라는 사무실에서 일을 하고있는 상황이라면,

      회사건물 밖에있는 문서를 들고와서 일을 하는 것은 안되겠죠??

      하지만, 사무실 밖이긴 해도

      회사 안에 있는 문서를 써서 일을 하는 것은 문제가 되지 않을겁니다.

      근무시간이 끝난 야근을 하는 시간이더라도요.

      이때, 내부함수라는 사무실에서 일을 하는 사람은.

      외부함수라는 회사의 직원이기 때문에, 외부함수의 문서를 쓸 수 있습니다.

      회사라는 외부함수에 지정된 변수 ( 문서 ) 를

      내부함수라는 사무실로 가져와서 쓸 수 있는 것.

      이게 클로져라고 생각합니다.


      작성해주신 코드가 작동을 하는 이유는

      var arr2 = [ ] ; < 배열을 생성
      for ( var i = 0 ; i < 5 ; i++ ) { < 5회 반복하는 반복문의 구성 생성
      arr2 [ i ] = function ( id ) { return id ; } ( i ) ; }
      ^ 매개변수 i 를 갖는 arr2 라는 객체에,
      id 라는 매개변수를 갖는 함수를 담았고,
      그 함수는 id 를 return 하라는 내용이죠.
      그리고 그 함수에 i 라는 인자를 넣어 실행하라는 명렁이
      위의 반복문 구절에 의해 반복되는 것입니다.

      이렇게 작동을 해서 인데요.

      여기는 회사와 사무실이라는 상황이 생기지 않았죠??

      왜냐하면 작성해주신 코드는 하나의 함수(회사)만 포함하고 있으니까요.

      이해가 되셨으면 좋겠습니당.

      VSCODE 넘모 편하고~ >_<
      대화보기
      • 준바이
        지금 작성하신 코드는 클로저가 적용되었다고 보기가 힘듭니다.

        클로저는 내부 함수가 외부 함수의 맥락에 접근하는 개념이라고 살펴보았습니다.

        반복을 다 벗겨내고 님이 작성한 코드를 볼까요?

        var arr2 = [];
        var i = 0 ;
        arr2[0] = function(id){return id}(0);// 그냥 0라는 값이 arr2[4]에 들어감
        i = i+1;
        arr2[1] = function(id){return id}(1);// 그냥 1라는 값이 arr2[4]에 들어감
        i = i+1;
        arr2[2] = function(id){return id}(2);// 그냥 2라는 값이 arr2[4]에 들어감
        i = i+1;
        arr2[3] = function(id){return id}(3);// 그냥 3라는 값이 arr2[4]에 들어감
        i = i+1;
        arr2[4] = function(id){return id}(4); // 그냥 4라는 값이 arr2[4]에 들어감
        i = i+1;

        [ 반복 부분은 생략합니다 ]

        즉... 질문자 분께서는 그냥 var arr2 = [0,1,2,3,4] 라는 숫자 배열을 만드신겁니다.

        아마 function(id){return id}(i); 라는 IIFE라는 방식에 대해 생소하시다 보니 이해가 잘 안되신 것 같습니다. function(id){return id}(i);를 조금 이해가 쉽게 작성하자면

        function(id){
        return id
        }

        라는 함수를 만든 바로 그 자리에서 바로 호출하는 개념입니다. 그래서 끝에 (i)가 붙는 것이죠.
        함수 호출할때 '함수명(보낼 값)'의 형태자나용. 자 그럼 이 함수를 무엇을 return 하죠? (i)를 통해 전달한 id값을 반환하겠죠. 그래서 그냥 숫자를 반환한 값이 배열에 들어갔던 겁니다.

        그렇기 때문에 반복문을 통해 출력한 값이 0 1 2 3 4 인 것이죠!!

        이고잉님이 보여주셨던 예제는 var arr2 = { 함수1,함수2,함수3,함수4,함수5 } 형태로 구성이 되며
        각각은 외부 함수와의 맥락에 연결되어 있어서 출력 값이 0 1 2 3 4 였던 것 입니다.

        이해가 조금 되셨나요??

        # 클로저라는 개념은 초심자라면 확실히 조금 나중의 과제로 미뤄둬도 나쁜 선택을 아닌 것 같습니다. 저도 깊은 이해는 접어두고 개념적으로만 이해하고, 개발이라는 분야의 큰 그림을 보고자 진도를 좀 열심히 빼고 있어요 ㅎㅎ 화이팅 입니다
        대화보기
        • COCO
          친절한 설명 감사합니다 ~ !
          대화보기
          • 브이에스코드
            var arr2 = [];
            for(var i = 0; i < 5; i++) {
            arr2[i] = function(id) {
            return id;
            }(i);
            }

            for(var index in arr2) {
            console.log(arr2[index]);
            }

            마지막 예제 이렇게 수정해도 원하는 결과가 나오긴 한데, (0 1 2 3 4)

            이렇게 수정한 것이 '클로저' 란 개념이 포함(사용)된 건지 아닌지는 잘 모르겠군요...

            제 생각엔 원하는 결과를 얻기위해 수정된 것일뿐 '클로저'란 개념은 사용 안된 수정법인것 같은데

            고수분들 답변 부탁드립니다.
          • 아하
            감사합니다. 이해가 쏙쏙 되네요. 강의하셔도되겠어요.
            대화보기
            • 준바이
              4번째 영상에서 많은 분들이 이해가 잘 안가시는 것 같아 ( 저 또한 1시간 정도 이해하느라 구글링했네요. 이거도 작성하느라 30분 씀 ) 정리해본 것을 올립니다. 2개의 코드에 대한 분석입니다.

              1. 문제가 되는 케이스

              [코드 원본]

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

              for(var index in arr) {
              console.log(arr[index]());
              }

              [ 위의 원본에서 반복을 벗겨낸, 사실 상 동일한 코드 ]

              var arr = [ ] ;

              var i = 0 ;

              arr[i] = function() { return i }; // 이 시점에서 arr속의 i 는 0 입니다.
              i = i + 1; // i 는 1이 됩니다.

              arr[i] = function() { return i }; // 이 시점에서 arr속의 i 는 1 입니다.
              i = i + 1; // i 는 2가 됩니다.

              arr[i] = function() { return i }; // 이 시점에서 arr속의 i 는 2 입니다.
              i = i + 1; // i는 3이 됩니다.

              arr[i] = function() { return i }; // 이 시점에서 arr속의 i 는 3 입니다.
              i = i + 1; // i는 4가 됩니다.

              arr[i] = function() { return i }; // 이 시점에서 arr의 i 는 4 입니다.
              i = i + 1; // 바로 이 문장 때문입니다. 반복문에서는 4번째 반복을 마친 후 i++을 한번 더 실행해서 그 다음 조건을 체크 할 때 i가 5보다 작음을 판단하게 되는데 이 코드로써 i 는 5가 됩니다. 계속 보시죠.

              // for(var index in arr) 이라는 문법은 기본적으로 index에 arr의 길이만큼을 0에서 부터 대입시킵니다. 즉, 우리 arr의 길이는 5개니까 index에는 순차적으로 0 1 2 3 4 가 대입이 되겠죠. 그래서 반복문을 벗겨내면요,

              console.log(arr[0]()); // 5
              console.log(arr[1]()); // 5
              console.log(arr[2]()); // 5
              console.log(arr[3]()); // 5
              console.log(arr[4]()); // 5

              // 이렇게 되는데요, 이 과정에서 각각 함수를 호출할 때(arr[0]() ~ arr[4])처럼)는 function() {return i}에서 그 i는 그냥 단순히 var i라는 전역변수를 참조하게 됩니다. 그래서 위에서 마지막으로 증가한 값인 가장 최신의 i값인 5가 5번 출력되는 것이죠.

              # 참고로, 제가 확인해보니 이런 식으로 사용할 때는 배열을 쓰면 구글 개발자 도구가 버그를 뱉더군요. 그래서 var arr = [ ] 이 아니라 var arr = { }라 해줘야 버그가 안나더라고요.
              # 아참 var도 요즘 안씁니다. ( let 에 대해 구글링해서 공부해주세요, block scope와 global scope, function scope 개념 잡으시는 거 선택이 아니라 필수에염)

              2. 클로저가 적용된 코드.

              [ 코드 원본 ]

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

              [ 위의 원본에서 반복을 벗겨낸 코드 ]

              위의 설명을 통해 똑같이 유추할 수 있는 부분은 설명을 생략합니다.

              var arr = [ ]

              var i = 0 ;

              arr[i] = function(id){
              return function( ){
              return id;
              }
              }(i); // 가독성을 위해 이거만 들여쓰기를 할게요. 자자 이게 1번의 문제가 되는 코드와의 차이점은 외부함수와 내부함수를 적용해서 함수안에 함수를 만든 점과, IIFE(https://sseambong.tistory.com/250 , 참고하세요 읽는데 얼마 안걸림)라는 개념을 적용하여서 함수를 즉시 호출하는 방식을 썼다는 점 입니다. 여기서 id를 주목해주세요. i라는 매개변수를 function(id)가 받습니다. 그와 동시에 그 밑에 바로 var id = 전달받은 i라는 값; 라는 문장이 추가 된다고 보셔도 좋아요. ( 더 자세한 메커니즘을 알고 싶다면 '함수 매개변수 전달 과정에서 메모리 복사와 참조' 라는 주제로 공부해보시는 걸 추천합니다. ) 그러면 사실상 함수안에 지역변수를 만든 꼴이 되는거죠 !! 이로써 코드 마지막에 arr[i]()라는 함수는 전역변수인 var i를 리턴하는 함수가 아니라 var id라는 지역변수를 리턴하는 함수가 된 것 이겠죠.

              i = i +1;

              arr[i] = function(id){ return function( ){ return id; }}(i); // var id는 1
              i = i +1;

              arr[i] = function(id){ return function( ){ return id; }}(i); // var id는 2
              i = i +1;

              arr[i] = function(id){ return function( ){ return id; }}(i); // var id는 3
              i = i +1;

              arr[i] = function(id){ return function( ){ return id; }}(i); // var id는 4
              i = i +1; // 아까와의 차이점 이제 아시겠죠? 여전히 이 i는 5겠지만 앞으로 출력할 내용에는 전혀 영향을 미치지 않습니다.

              console.log(arr[0]()); // 0
              console.log(arr[1]()); // 1
              console.log(arr[2]()); // 2
              console.log(arr[3]()); // 3
              console.log(arr[4]()); // 4

              감사합니다. 조금이라도 도움이 되었으면 좋겠습니다. 본인이 이해가 안간다면 더 많은 시간을 투자해서 알아내야 한다고 생각합니다. 어떨 때는 되고 어떻때는 안되고 하는 것을 파악하는 게 프로그래밍 고수로 가는 정도이자 가장 빠른 길로 믿고서 열심히 공부합시다!!
            • 양아치네 에게
              불쌍한 친구네..
              이고잉님은 국가에서 상을 줘도 모자란 분이시다..
              이 분야에 이정도 재능기부하는 분이 없어.
              너의 부족한 이해력과 나태한 자세를 탓해라. 이해가 안가면 다시 듣던가
              구글링해서 몇 페이지를 뒤져서라도 이해를 해야지 남탓이여 어디서.
              그런 자세로는 그 어떤 일을 해도 항상 그 말만 되뇌이겠네.
              부디 자기자신을 되돌아 보고 변화의 기회로 삼길 바란다.
              대화보기
              • 머가리
                인간적으로 졸라 쉬운데 이해가 안되면 본인 머가리를 탓해야지 강사를 탓해 ㅋㅋ
                코딩말고 막노동하면서 살아야할 인간이 주제에 안맞는 짓을 하려니... ㅉㅉ
                대화보기
                • 현역 개발자
                  저는 전문 개발자로서 15년째 주로 대기업 오라클 ERP/DB 설계/개발에 종사하고 있습니다.
                  egoing 님의 강의를 항상 감사한 마음으로 보고 있습니다.
                  어딜 가든 가르쳐주는 사람에게 고마운 걸 못 느끼고 징징거리는 양아치 같은 인간들이 있습니다.
                  그런 인간치고 실력 있는 사람은 아직 못 봤습니다.
                • 설명충
                  나 이해 안되서 그러는데 니가 좀 더 잘 설명해 주면 안되겠니? 안되지?_너같은 애들 특징이 걍 실력도 뭣도 아무것도 없는데 정신나간것 처럼 분위기 흐리고 가는게 종특이라.
                  대화보기
                  • 호날두
                    손흥민ㄴ님 박지성님.. 진짜최고된다..
                  • 양아치냐
                    맥락없이 웬 욕질
                    설명 더 잘하든지
                    처 자빠져 자든지
                    그냥 구경 하든지
                    여긴 좀 끼지마라
                    대화보기
                    • 양아치네
                      개나소나 이해할만한 개념은 오래 설명하고 --- 본인이 이해하는건 대충들음
                      정작 진짜 헷갈릴 개념은 자기도 잘 모르니까 대충 넘겨버리네 ---- 설명해도 어차피 못알아들음
                      실력없는 강사들 특징인데 얘도 똑같구만 ----- 악플러들 특징인데 똑같구만

                      ---비밀번호도 단순하네 머리처럼
                    • 질문이 잇습니다. 왜 에디터에서는 안하시고 콘솔에서만 하시는지용~~~~ 궁금해용!~~~ 에디터에 안하니 솔직히 저같이 초짜는 이해가 반만 되서요~
                    • 굼벵이
                      완료
                    • 오현주
                      2019.12.18 수강
                    • 홍주호
                      20191026 완료
                    • 정홍
                      완료
                    • 박창신
                      완료
                    • 싸커홍
                      나중에 다시한번 복습해야겠네요
                    • var은 function scope이고
                      let, const는 block scope 입니다.
                      반대로 쓰셨네요
                      대화보기
                      • 스코프
                        var의 scope가 function scope이고
                        let, const가 block scope입니다.
                        자바스크립트 원래 block scope가 없었는데 es6에서 let과 const가 생기면서 개념이 생긴것입니다.
                        대화보기
                        • 마지막 부분에서, scope 의 개념으로 접근했을 때,
                          var 의 scope (block-scope)
                          let 의 scope (function-scope) 서로 다른 특성으로 으로 구분되기 때문에,
                          var 을 let으로 바꾸면 정상적인 출력(0 1 2 3 4) 를 얻을 수 있습니다.

                          const arr = []
                          for(let i = 0; i < 5; i++){
                          arr[i] = function(){
                          return i;
                          }
                          }
                          for(let index in arr) {
                          console.log(arr[index]());
                          }
                        • 박순기
                          손흥민님 감사합니다... egoing님이 이렇게 설명했으면 대부분 사람들이 빨리 이해를 했을텐데..
                          대화보기
                          • 마지막 영상에서 잘못된 코드가 왜 5를 다섯 번 찍어내는지 정리해보았어요! 이해하는데 한참 걸렸는데
                            잘못된 부분 있으면 알려주시면 감사하겠습니닷.
                            --------------
                            var arr = []
                            for(var i = 0; i < 5; i++){
                            arr[i] = function(){
                            return i;
                            }
                            }
                            for(var index in arr) {
                            console.log(arr[index]());
                            }
                            --------------------
                            - 위 코드에서 루프가 다 돌고 난후 `i++`이 실행되어 최종적으로 i값은 5이다
                            - 첫번재 반복문에서 arr[index]에 담긴 것은 특정한 값이 아니라 함수이다.
                            - console.log(arr[index]());를 호출했을 때, 외부의 컨텍스트에 접근할 수 있을 것으로 기대하였다.
                            - 하지만 for문의 i는 외부함수의 변수가 아니었다. 훼이크!
                            - 따라서 단순히 arr[index]에 담긴 함수가 5회 실행되어 현재의 i값인 5를 출력하였다.
                          • 박지성
                            아래에 이어서
                            마지막 부분 해결부분을 설명해드리자면,

                            var arr = []
                            for(var i = 0; i < 5; i++){
                            arr[i] = function(id) {
                            return function(){
                            return id;
                            }
                            }(i); // 이 부분에서 감싸주었던 함수가 "실행"이 됩니다.(not "참조"!) 때문에 i 값을 for문이 도는것과 같이 갖게되지요. 감싸주었던 함수의 매개변수(id)와 그 함수가 리턴한 함수가 클로저 관계를 맺게 되면서 그 값은 정해져버리게 됩니다. 그래서 마지막에 배열에 전달된 내부함수의 "참조"값이 "실행"되면서 값이 찍히게 되는겁니다.
                            }
                            for(var index in arr) {
                            console.log(arr[index]()); // 실행 부분
                            }

                            // 이해가 잘 되지 않으시는 분들은 자바스크립트의 "스코프" 부분과 함수의 "일급객체" 부분을 공부하세요. :)
                          • 손흥민
                            마지막 부분은
                            mdn 문서 를 참조하시면 이해하기 한결 수월하실겁니다.

                            https://developer.mozilla.org......res
                            (루프에서 클로저 생성하기: 일반적인 실수) 이 부분을 읽어보세요.

                            생활코딩의 클로저 마지막 영상의 부분을 설명하자면,
                            ( 반복문을 사용하며 5개의 클로저 환경이 생길 것 같지만 실은 모든 클로저가 그 환경을 공유하고 있기 때문에 모두 5 가 찍히는 것입니다.)

                            여기서 말하는 "환경" 이란, 쉽게 말해 클로저를 사용해서 가져올 data를 말합니다.
                            위의 예제에서는 outer함수의 지역변수나 factory_movie함수의 매개변수등이겠지용

                            좀더 이해를 돕기위해
                            위의 코드를 풀어서 쓰자면

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

                            배열들은 함수들의 참조만 가지고 있을 뿐입니다.(실행되지 않습니다!)

                            arr[0] = function(){
                            return i;
                            }
                            arr[1] = function(){
                            return i;
                            }
                            arr[2] = function(){
                            return i;
                            }
                            arr[3] = function(){
                            return i;
                            }
                            arr[4] = function(){
                            return i;
                            }

                            i++

                            실행부분은 여기가 되겠지요?

                            console.log(arr[0]()); // i = 5
                            console.log(arr[1]()); // i = 5
                            console.log(arr[2]()); // i = 5
                            console.log(arr[3]()); // i = 5
                            console.log(arr[4]()); // i = 5
                          • 마지막꺼 존나게 난해함 그냥
                          • ㅊㅈㅅ
                            마지막꺼 이해하는데 한오백년걸렸네요 와
                            어떤순서대로 도는건지
                            어떤게 먼저 실행되는건지
                            왜 i번째 배열에 저장하는데 리턴하는 숫자는 5로 고정인지 고민이었는데

                            function(){
                            return i;
                            };
                            이상태 그대로 배열에 저장되고
                            마지막에 리턴할때 이미 i 는 5까지 올라간 상태여서
                            5
                            5
                            5
                            5
                            5
                            입니다. 이해하시는데 도움되시길
                          • 객체지향
                            false니까 for문을 빠져나가니까 4까지만 실행되는거예요...
                            대화보기
                            • 너무어렵따..
                              질문 있습니다! 이것저것 시도해보면서 코드를 수정해보았는데요.
                              출력 값은 0,1,2,3,4가 나옵니다.

                              var arr = []
                              for(var i = 0; i < 5; i++){
                              arr[i] = function(){
                              return i;
                              }(i); << 질문1. 내부함수에서는 외부함수에 있는 for 문을 가져다 쓸 수 없으니 이런 식으
                              로 내부함수 밖에서 i를 출력하면 변수만 가져다 쓰는 것 이니까
                              0,1,2,3,4가 되는 것 맞나요? (0,1,2,3,4가 나오는 이유가 이 것이 맞는
                              지 궁금합니다.)
                              }


                              for(var index in arr)
                              console.log(arr[index]); << 질문 2. (arr[index]);로 하면 출력이 정상적이게 되고 (arr[index]());로 하면 에
                              러가 뜨는데 왜 그런건가요?ㅠㅠ
                            • ㅇㅇ
                              마지막 구문을 이해하려면 IIFE의 이해가 필수적임
                              아리송하신 분은 꼭 검색해보세요!
                            • 신입
                              잘못된 예제에서
                              다른거 다 이해했는데 왜 i가 4가 나와야하는지 이해를 못했는데 for문이 동작할때
                              for(var i=0; i<5; i++) {
                              //...
                              }
                              에서 i에 5가 들어가면 for문의 조건절이 false되면서 루프를 빠져나가고 i에는 최종적으로 5가 들어간다. 라고 이해했는데 제가 맞게 이해한건가요?
                            • 초보자
                              강의 이해하고 클로저식으로 코드 짜는데 1시간은 넘게 걸린거 같네요 감사합니다.
                            • slowbegin
                              저는 머리로는 이해가 되는데,
                              코딩 따라하기를 해도 결과값도 제대로 안나오고
                              어디서부터 잘못 타이핑한건지 찾으며 해매다가 시간이 가버리네요ㅠ
                            • 궁금
                              홍승우님의 답변 이해하는데 많은 도움이 됐어요!
                              => arr 각 배열에 담긴 것은 return될 i가 아니라 동작하기전 함수 자체가 들어가 있는 것이기 때문에 나중에 배열에 각각 들어있던 해당 함수들이 선언될때 서야 i 값(5)를 가져온다.

                              근데 또 궁금한점이..ㅠㅠ 해당 내용이 이전 유효범위 내용에서 배운 '함수 내 변수는 실행할때가 아닌, 선언할때의 값을 가져온다.'와 또 헷갈려요... 아래 코드에서 i 값이 10이 아닌 선언할때의 5가 오는 것 처럼요.. ㅠㅠ 혹시 설명가능하신분 부탁드립니다ㅠ

                              var i = 5;

                              function a(){
                              var i = 10;
                              b();
                              }

                              function b(){
                              console.log(i);
                              }

                              a();
                            • david
                              그냥 _title은 이름 짓기 나름이라 신경안쓰셔도 될거 같네요 그냥 매개변수를 암거나 하나 받는다는 의미지 _title을 받아야 되는건 아니니깐. 예를 들자면 set_title : function(_korea){
                              title = _korea
                              } 해도 동작될거에요. 그냥 매개변수 하나를 받는다는거고 이름을 개판으로 지으면 안되니까 당연히 title로 사용할건데 좀 보안적이슈가 있을것같다는 암축된 의미로 _title로 개발자가 정한거고.. 어디서 _title 값을 받아오는게 아닌 아무 매개변수 하나를 받으면 그걸 _title로 쓰겠다는 의미같네요.
                              대화보기
                              • 컴공러
                                흠.. 자바의 클래스와 비슷한 개념인건가요?
                              • 세번째 강의에서 _title에 대한 변수는 별도로 선언을 하지 않았는데, 그걸 매개변수로 받는것이 가능한가요? title변수 같은 경우 외부 함수에서 매개변수로 받는다고하지만, _title과 title은 다른데, 어떻게 받을 수 있는건지 궁금해서 질문드립니다
                              • Juyeon Heo
                                어렵네요 ㅠㅠㅠ 이해될때까지 열심히 복습해보겠습니다.....ㅠㅠㅠ
                              • 바토
                                신기한 자바스크립트의 세계네요. 재밌어요!
                              • 삼산우성
                                마지막 영상 내용은 어렵네요... 좀 더 공부하고 한번 더 복습해야 될 거 같습니다 ㅠㅠ
                              • 호두
                                이해가 됐어요
                              • 치미
                                와 마지막 영상 머리에 쥐나는 느낌이네요
                              • choon
                                감사합니다.
                              • 미완성
                                20190109
                              • Minsu Yun
                                저도 마지막 영상은 조금 어렵네요 ㅠ 여러번 봐도..ㅎㅎ
                              • 소라김
                                마지막영상 다시보기 !
                              버전 관리
                              egoing
                              현재 버전
                              선택 버전
                              graphittie 자세히 보기