클로져 함수에 대해서 알고싶어요.

2014-01-23 10:03

클로져 함수에 대해서 알고싶어요...

자바스크립트에서 클로져가 뭔지.

구체적인 예는 어떤게 있고.

어떻게 써야 좋을지~ 궁금합니다~

4개의 의견 from SLiPP

2014-01-23 12:07

음. 간단히 계산기를 예로 들어보죠.

계산기는 숫자 1개를 받아서, 잠시 데이터에 저장해둔 뒤에, 다음 숫자 1개를 받아서, 결과값을 리턴해줍니다. 덧셈만 예로들어볼게요.

var calc = function(num1) { return function(num2) { return num1 + num2; } }

그럼, 제가 실제 계산을 행하고자 할 때, 버튼이 아래와 같이 있다고 치죠.

[더하기 버튼] [결과값 버튼]

뭐 보통의 계산기는 다 저렇죠? 특정 숫자 (10이라고 치죠)를 입력하고 더하기 버튼을 누릅니다.

var plus = calc(10);

뭐 대충 이렇다고 치죠. 그리고 더하고자 하는 숫자(30이라고 치죠)를 입력하고 결과값 버튼을 누르면,

plus(30); 이라고 호출을 하게 된다고 생각해봅시다.

그렇게 하게 된다면 var calc = function(num1) { return function(num2) { return num1 + num2; } }

이 코드에서 num1은 calc를 호출할 때 사용한 파라미터이니, 저 값에는 10이 들어가있는 채로, return function을 해주니 함수가 돌아가겠죠?

plus변수에는 function(num2) { return num1 + num2; } 부분이 들어있습니다.

그럼 plus를 호출 할 때, 제가 30을 넣어주면, num2가 30이 되겠죠? 그럼 num1 + num2를 하게되면 40이 리턴되서 들어가게 되는겁니다.

뭐 대충 이런 개념입니다.

2014-01-24 15:03

음.. 쉽게 생각 하시면

function closureTest(a){
     var a2 = a;
     return function(b){
          return a2 + b;
     }
}


var test = closureTest(1);
alert(test(2));

위 코드의 Flow를 보겠습니다.

  1. closureTest 함수를 정의 (인자로 a를 받네요)
  2. closureTest 함수 안에 익명 함수 정의 (그런데 이 익명 함수는 인자로 받은 b를 상위함수(closureTest)의 지역변수 a2와 더한값을 리턴하네요.)
  3. var test = closureTest(1); (*test란 변수에 저장되는 값을 한번 생각해보셔야 합니다.* test란 변수는 closureTest(1)을 호출 하였으므로 리턴값은 익명함수에 대한 참조입니다.)

     return function(b){
       return a2 + b;
     }
    
  4. 위 코드 처럼 익명함수 자체(function)를 리턴 하니깐요.
  5. 자 test함수에 인자로 2를 넣어 호출(test(2)) 합니다. (3번에서 test는 익명함수에 대한 참조라고 했지용..?)

    alert(test(2));
    
  6. 그럼 익명함수의 내용처럼 (a2 + 인자로넘긴 숫자 2)의 값이 return 되어야 합니다.
  7. 그런데 3이 출력됩니다. (a2 + 인자로넘긴 숫자 2 = 3)이라고 합니다.
  8. a2의 값은 어디서 나온걸까요..?
  9. 3번의 var test = closureTest(1) 부분에서 인자로 넘긴 1이 지역변수 a2에 저장이 되어 있었던겁니다.

위처럼 클로저는 자바스크립트에서 함수의 유효범위, 그리고 체인과 밀접한 관계가 있는것 같습니다.

더 자세한 내용은 http://http://youngman.kr/?p=675 참고 부탁드립니다 https://developer.mozilla.org/ko/docs/JavaScript/Guide/Closures 여기도 갠찮네요!

참고! 위 3번에서 다음과 같이 test의 내용을 출력해 보세요 :)

var test = closureTest(1);
alert(test);
의견 추가하기

연관태그

← 목록으로