[JavaScript] 비동기 처리 1 (CallBack 함수에 대해)

참고 JavaScript: What the heck is a Callback?

CallBack 함수란?

• 나중에 호출 되는 함수
• 특별한 선언이나 문법적 특징을 가지고 있지는 않다.
• 일반적인 자바스크립트 함수
• 어떤 이벤트가 발생했거나 특정 시점에 도달했을때 시스템에서 호출하는 함수

CallBack 함수가 필요한 이유?

• 자바 스크립트는 이벤트 기반 언어 이다
• 즉 자바 스크립트는 다음 명령어를 실행하기전 이전 명령어를 읍당을 기다리기 보단 다른 이벤트들 계속 명령을 수행

function first(){
  console.log(1);
}
function second(){
  console.log(2);
}
first();
second();

• 예상하듯이 first 함수가 먼저 실행 그 이후로 second 함수가 실행이 되어 진다.

// 1
// 2

그럼 만약 frist함수가 즉시 완료될 수 없는 코드를 포함한다면?

예를들어, request를 보낸후 응답 response 을 기다려야 하는 API라면?

// setTimeout함수를 사용

// setTimeout 함수는 지정된 시간이 지난 후 함수를 call

function first(){
  // Simulate a code delay
  setTimeout( function(){
    console.log(1);
  }, 500 );
}
function second(){
  console.log(2);
}

first();
second();

console.log(1) 을 500ms 딜레이 시켰다. 실행 결과는 ?

// 2
// 1 

• first() 함수를 먼저 콜 했더라도 그 결과는 second() 함수의 결과 이후에 찍힌다

콜백만들기

function doHomework(subject) {
  alert(`Starting my ${subject} homework.`);
}

doHomework("Math");

// Alerts: starting my math homework;

CallBack 예제 1

function doHomework(subject, callback) {
  alert(`Starting my ${subject} homework.`);
  callback();
}

doHomework('math', function() {
  alert('Finished my homework');
});

• 결과 : startingmath homerwork 메시지와 finsihed my homework 메시지를 받음

CallBack 예제 2

function doHomework(subject, callback) {
  alert(`Starting my ${subject} homework.`);
  callback();
}
function alertFinished(){
  alert('Finished my homework');
}
doHomework('math', alertFinished);

• 결과는 같다 . alertFinished 함수의 정의를 인자로 넘겨준다.

CallBack 실제 사용 예제

T.get('search/tweets', params, function(err, data, response) {
  if(!err){
    // This is where the magic will happen
  } else {
    console.log(err);
  }
})

• 실제 CalBack 함수가 어떻게 쓰이는지에 대한 예제
• T.get 는 Twitter에 get 요청을 보냄
• 이 요청에는 세 개의 인자 : 'search/tweets’ 는 요청의 경로, params 검색 값 , 그리고 콜백함수

결론

• 콜백은 우리가 이 코드의 다음 로직의 넘어가기 전 AP의 응답을 기다려야 하기 때문에 중요하다
• API 요청이 성공할지 실패할지 모르기 때문에 파라미터들을 던져놓고 기다린다
• 그렇다면 Twitter에서는 err , response 들의 Object를 보낼 것이고 콜백 함수 내에서 if() 문을 사용함으로써 우리의 요청이 성공했는지 아닌지 판단할 수 있다. 그 이후로 새로운 데이터를 처리하면 된다.