자바스크립트 클로저질문

Question

안녕하세요. 자바스크립트 독학생입니다. 아래는 클로저 한 예의 코드입니다.아무리 머리를 굴려봐도 변수 add5에 인수값을 2로 줬을때 왜 y값이 2가 되어add5(2);의 값이 7이 되는지 알수가 없네요. makeAdder에 인수값 5는 x인것을 알겠습니다. 아 선배님 조언부탁드립니다. function makeAdder(x) { return function(y) { return x &#43; y; }; } var add5 &#61; makeAdder(5); var add10 &#61; makeAdder(10); console.log(add5(2)); // 7 console.log(add10(2)); // 12

니플 · Accepted Answer

네ㅎㅎ 저 체택해주세요ㅋㅋ

니플 · Answer

클로저가 함수를 만드는거예요makeAdder(5)는return 5&#43;y를 반환하게 됩니다 앞에 x가 5로 바껴서 함수를 만들어낸것이죠 따라서 인자를 2를 주면5&#43;27이 나옵니다

gcoder · Answer

makeAdder함수의 리턴값, 즉 function(y) 익명함수가 클로저 맞죠? 클로저가 함수를 만드는거라고 하셨는데 그럼 이 함수를 만들었으니깐 클로저이고변수 add5에 인자값 2를 준다는 의미가 무슨 의미인지 모르겠어요. add5변수는 makeAdder함수를 인자값5를주고 호출했고 그 리턴값이 익명함수function(y)니깐인자값 2는 익명함수 y로 들어가는건가요? 말이 길어졌네요..제가 확실히 이해안가는 부분은 함수호출을 담은 변수 add5에 인자값을 주면 이 인자값이 어디로 가는지 모르겠어요. 어렴풋이 생각해보면makeAdder인자로 갈듯한데, 변수선언할때 미리 5라고 줘버렸으니 그건 아닌것같고..아아직 기초가 안되서 그런가..아..선배님 도와주세요..

니플 · Answer

함수 리턴하는 것을클로저라고 합니다 클로저의 결과로 add5가 나온거죠 add5가 5&#43;y로 반환된거입니다x에 5로 바꾸고return에 있는 함수 그대로반환한다고 생각하시면 됩니다ㅎㅎ

gcoder · Answer

아니면 간단하게 makeAdder(5)가 function(y)값을 리턴하니깐, add5변수 인자값을 2로 주면 add5(2) &#61; function(y)가 되서 y가 2가 되는건가요? ㅎㅎㅎ아 모르겠다..

니플 · Answer

네ㅋㅋ그거예요 함수로 보시면 되요

gcoder · Answer

그래도 반환하면 var add5 &#61; 5 &#43; y 아닌가요? 근데 add5(2) 이건 도대체 무슨 의미인가요? 그냥 콘솔에다가 함수 아무거나 만들어서 비슷한 모양만들어서 , 즉 변수선언할때 함수 넣고 ..그 변수에 함수선언할때처럼 인자넣고 해보니..에러뜨는데..아..ㅎㅎㅎㅎ

gcoder · Answer

아 유레카..ㅎㅎㅎadd5는 makeAdder(5)함수의 리턴값을 저장하는 변수인데.그 리턴값이 function(y)익명함수니깐 add5에 인자로 2를 주고 , 2는 y에 대입되고아까 makeAdder함수 호출할때 x값을 5로 줬으니깐 익명함수 리턴값 5 &#43; 2는 7이 되는구나.. 아 선배님 감사합니다. ㅠ.ㅠ

jjp372c · Answer

질문하신 내용은 보통 함수형에서 커링이라고 부릅니다.

otwm · Answer

https://github.com/otwm/ProReactStudy/wiki/%28es5%29%ED%81%B4%EB%A1%9C%EC%A0%B8%28lexical-scope%29%2C-%EC%8A%A4%EC%BD%94%ED%94%84%EC%B2%B4%EC%9D%B8%2C-%EC%BB%A4%EB%A7%81%2C-es6%EC%97%90%EC%84%9C%EC%9D%98-%EC%BB%A4%EB%A7%81

Jet Li · Answer

jjp372c currying이 아니라 partial application입니다. 두개의 용어가 좀 헛갈리긴 하지요.// currying: 두개의 인자를 받는 function foo(x,y) { return x&#43;y;}를 단일 인자를 받는 함수로 변경 function foo(x) { return function(y) { return x &#43; y} } // partial application : currying된 함수의 파라미터를 일부만 적용 foo(1) // 결과 -> function (y) { return 1 &#43; y} // 파라미터를 모두 적용 foo(1)(2) // 결과 -> 3

자바스크립트 클로저질문

11개의 답변

Q&A 목록