JavaScript Callback (자바스크립트 콜백)

[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 함수라고 함

1. callback이 anonymous functions이고 다른 함수의 파라미터로 쓰이는 경우
2. 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이 사용되어서 이해하기가 힘들 때
• 해결방법
  1. anonymous function들에 이름을 붙여라
  2. Module화시켜라

Callback function이 많이 사용 되는 때

1. async execution을 위해 사용 (e.g., reading files, making HTTP requests)
2. 이벤트 리스너/핸들러 안에서 사용.
3. setTimeout, setInterval 함수 안에서 사용
4. 일반화를 위해. 코드의 간결함을 위해

Advertisements

• web development