자바스크립트 핵심 가이드 - (함수 3탄 콜백)

11. 콜백

 

request = pre_req( ); response = send_req_sync( request ); display ( response );

 

위와 같은 방법은 동기화된 요청을 하기 때무에 서버로부터 응답이 올 때까지 클라이언트는 꼼짝없이 멈춰서 기다려야 한다.

비동기식 함수는 서버의 응답을 기다리지 않고 그 즉시 반환되기 때문에 클라이언트는 멈춤 상태로 빠지지 않는다.

 

reqeust = pre_req( ); send_req_async ( request, function ( response ) {    display( response ) ; });

 

send_req_async 함수에 함수를 매개변수로 전달하여 서버로 부터 응답이 왔을 때 호출되게 한다.

 

콜백 함수는 특정 기능을 수행하기 위한 로직과 기능 수행 후 반환되는 결과 값을 가지고 이를 표현하는 로직을 분리 할 수 있다. 

이는 view 의 분리라는 점에서 MVC 패턴과 비슷하다고 볼 수 있다.

 

특정 함수의 반환 값을 콜백으로 넘기는 방법을 살펴 보자.

매개 변수를 통해 함수를 받고, 그 함수를 통해 결과 값을 다시 호출하면 된다.

그런데 jQuery 에서 제공되는 함수들을 보면 단순히 콜백을 통해 결과 값을 넘기지 않는다.

 

jQuery 의 $.each 함수를 보면 해당 배열의 요소들을 모두 순환하면서 콜백으로 index 값을 넘기는데 이 요소를 콜백 함수의 매개 변수로

넘기지 않고 함수 내에서 this 키워드로 접근할 수 있다.

 

var test = [{name : 'a'}, {name : 'b'}, {name : 'c'}]; $.each( test, function(index) {    console.log( index + " : " + this.name ); });

 

어떻게 콜백 함수 안에서 this 키워드를 사용할 수 있을까?

prototype을 사용해서 콜백 함수의 원형을 배열 요소로 변경해 주면 된다.

 

var test = [{name : 'a'}, {name : 'b'}, {name : 'c'}]; $.each( test, function(index) {   callback.prototype = arr [i];   callback(i); }); each(test, function(index) {   console.log( index + " : " + this.name ); // 0 : view   1 : view   2 : view 라는 결과값을 보인다.   });

 

자바스크립트 함수는 클래스이며 자신의 원형을 prototype 으로 정할 수 있다. 하지만 prototype 으로 자신의 원형을 해당 배열 요소로 정했다고는 하지만 단순한 콜백 함수 호출로는 this 키워드로 접근 할 수 없다.

 

왜냐하면 자바스크립트 함수는 기본적으로 window 객체이기 때문에 자신만의 고유한 객체가 되지 않았기 때문이다. 

new 키워드를 이용해 보면

 

var test = [{name : 'a'}, {name : 'b'}, {name : 'c'}]; $.each( test, function(index) {   callback.prototype = arr [i];   new callback(i); }); each(test, function(index) {   console.log( index + " : " + this.name ); // 원하는 결과값을 얻을 수 있다.   });