[Understand JavaScript Callback Functions and Use Them] (http://javascriptissexy.com/understand-javascript-callback-functions-and-use-them/) 읽고 정리함.
- 함수는 First-class objects
- 즉, 함수의 type은 Object
- 함수는 variable에 저장될 수도, 다른 함수에 argument로 전달될 수도 있음
- 다른 함수에 argument로 전달되어 나중에 실행되는 함수를 callback 함수라고 함
- callback이 anonymous functions이고 다른 함수의 파라미터로 쓰이는 경우
- callback이 named function이고 다른 함수의 파라미터로 쓰이는 경우
- callback 함수는 일반 함수처럼 포함하고 있는 함수의 property나 global property에 접근할 수 있기 때문에 parameter로 사용 가능
- global property와 callback을 포함하고 있는 함수의 property를 callback의 parameter로 사용하는 예제
//Global variable var generalLastName = "Clinton"; function getInput (options, callback) { allUserData.push (options); // Pass the global variable generalLastName to the callback function callback (generalLastName, options); } getInput ({name:"Rich", speciality:"JavaScript"}, logStuff); //logStuff 함수코드는 출처사이트 참고
- callback 함수를 실행하는 함수에서 callback이 함수인지 체크하는 것이 필요. 체크안하면 run-time error 가능성 있기 때문.
if (typeof callback === “function”){ callback (generalLastName, options); }
callback method안에 this를 사용할 경우 발생할 수 있는 문제
- callback을 호출하는 함수가 global context의 함수일 경우 this는 window object를 가리키게 됨.
- 이를 해결하기 위해서 Call 또는 Apply function을 사용하여 callback 호출할 때 this를 설정함.
- 모든 함수는 call, apply method가 있음.
-
예를 들어 Apply를 사용할 경우, callback.apply(callbackObj, [firstName, secondName])으로 this는 callbackObj 객체라고 지정해줄 수 있음.
-
아래 예제에서 clientData.setUserName 함수에서 this 사용 중
- clientData.setUserName 함수를 callback으로 사용하고 싶으면 apply 메소드 사용하여 this가 가리키고 있는 객체(clientData)를 지정해 준다.
var clientData = { id: 094545, fullName: "Not Set", // setUserName is a method on the clientData object setUserName: function (firstName, lastName) { // this refers to the fullName property in this object this.fullName = firstName + " " + lastName; } } function getUserInput(firstName, lastName, callback, callbackObj) { // Do other stuff to validate name here // The use of the Apply function below will set the this object to be callbackObj callback.apply (callbackObj, [firstName, lastName]); } getUserInput ("Barack", "Obama", clientData.setUserName, clientData);
- 하나이상의 callback 함수를 다른 함수의 파라미터로 사용될 수 있음.
- 예를 들어 JQuery의 ajax function이 있음. 3개의 callback function이 파라미터로 사용됨.
$.ajax({ url:"http://fiddle.jshell.net/favicon.png", success:successCallback, complete:completeCallback, error:errorCallback });
Callback Hell
- 너무 많은 callback이 사용되어서 이해하기가 힘들 때
- 해결방법
- anonymous function들에 이름을 붙여라
- Module화시켜라
Callback function이 많이 사용 되는 때
- async execution을 위해 사용 (e.g., reading files, making HTTP requests)
- 이벤트 리스너/핸들러 안에서 사용.
- setTimeout, setInterval 함수 안에서 사용
- 일반화를 위해. 코드의 간결함을 위해