[자바스크립트] 콜백 함수

콜백 함수

디자인 패턴 중 하나인 옵저버 패턴에서 나온 개념

이벤트가 발생시 함수를 통해 전달하는 것

 

 시계의 알람 기능과 비슷하다 (정해진 이벤트 발생시 함수 동작)

 

특정기능을 수행하기 위한 로직과 기능 수행후 반환되는 결과 값을 가지고 표현하는 로직을 분리 가능

• 뷰의 분리라는 관점으로 MVC패턴과 유사

 

아래와 같은 예문을 보면 undefined 값이 출력된다. (결과값이 alert 함수보다 늦게 가져오기 때문)

onload=function() {

     var name;

     $.getJSON("test.json", "", function(res) {

          name = res.name;

     });

 

     alert(name);

} 

• 시간차를 두어 해결 할 수는 있다.
• setTimeout(function() { alert(name); }, 100);

 

 

콜백 함수 내에서 배열 요소를 this로 접근하기 위해서는 prototype를 사용하여

콜백 함수의 원형을 배열 요소로 변경한 후 new 키워드를 사용하면 된다

ex)    callback.prototype = arr[i];

new callback(i);

new 키워드를 사용하면 Window 객체가 아닌 새로운 객체가 된다

( non-static / static 개념으로 생각하자 )

 

위의 내용을 바탕으로 each() 함수 제작

var each = function(arr, callback) {

     for(i = 0; i < arr.length; i++) {

          callback.prototype = arr[i];

          new callback(i);

     }

};

onload=function() {

    var test = [ { name : 'a' }, { name : 'b' }, { name : 'c' } ];

 

     each(test, function(index) {

          alert(index + " = " + this.name);

     });

}

each() 함수 : 인자로 전달받은 배열에서 하나의 원소를 가져와 이 원소의 키와 값을 배열의 형태로 반환

* 출처 : 문학청년님의 강의 정리