조은놈 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이 리턴되서 들어가게 되는겁니다. 뭐 대충 이런 개념입니다. 좋아요 1 싫어요 0 언급↓
seoungkwang.kim 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를 보겠습니다. closureTest 함수를 정의 (인자로 a를 받네요) closureTest 함수 안에 익명 함수 정의 (그런데 이 익명 함수는 인자로 받은 b를 상위함수(closureTest)의 지역변수 a2와 더한값을 리턴하네요.) var test = closureTest(1); (*test란 변수에 저장되는 값을 한번 생각해보셔야 합니다.* test란 변수는 closureTest(1)을 호출 하였으므로 리턴값은 익명함수에 대한 참조입니다.) return function(b){ return a2 + b; } 위 코드 처럼 익명함수 자체(function)를 리턴 하니깐요. 자 test함수에 인자로 2를 넣어 호출(test(2)) 합니다. (3번에서 test는 익명함수에 대한 참조라고 했지용..?) alert(test(2)); 그럼 익명함수의 내용처럼 (a2 + 인자로넘긴 숫자 2)의 값이 return 되어야 합니다. 그런데 3이 출력됩니다. (a2 + 인자로넘긴 숫자 2 = 3)이라고 합니다. a2의 값은 어디서 나온걸까요..? 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); 좋아요 1 싫어요 0 언급↓
kimmunsu 2014-01-27 10:08 혹시 도움이 될지 모르겠으나, 링크하나 남겨봅니다. http://nathansjslessons.appspot.com/ 좋아요 0 싫어요 0 언급↓
4개의 의견 from SLiPP
음. 간단히 계산기를 예로 들어보죠.
계산기는 숫자 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이 리턴되서 들어가게 되는겁니다.
뭐 대충 이런 개념입니다.
@조은놈 답변 감사합니다.^^;
음.. 쉽게 생각 하시면
위 코드의 Flow를 보겠습니다.
var test = closureTest(1); (*test란 변수에 저장되는 값을 한번 생각해보셔야 합니다.* test란 변수는 closureTest(1)을 호출 하였으므로 리턴값은 익명함수에 대한 참조입니다.)
자 test함수에 인자로 2를 넣어 호출(test(2)) 합니다. (3번에서 test는 익명함수에 대한 참조라고 했지용..?)
위처럼 클로저는 자바스크립트에서 함수의 유효범위, 그리고 체인과 밀접한 관계가 있는것 같습니다.
더 자세한 내용은 http://http://youngman.kr/?p=675 참고 부탁드립니다 https://developer.mozilla.org/ko/docs/JavaScript/Guide/Closures 여기도 갠찮네요!
참고! 위 3번에서 다음과 같이 test의 내용을 출력해 보세요 :)
혹시 도움이 될지 모르겠으나, 링크하나 남겨봅니다. http://nathansjslessons.appspot.com/
의견을 남기기 위해서는 SLiPP 계정이 필요합니다.
안심하세요! 회원가입/로그인 후에도 작성하시던 내용은 안전하게 보존됩니다.
SLiPP 계정으로 로그인하세요.
또는, SNS 계정으로 로그인하세요.