6. async 콜백함수

콜백함수는 다른 함수의 인자로 들어가는 함수를 말한다. 흔히 비동기적(asynchoronous, 동시에 일어나지 않는, 다른걸 하고 있는 중에 일어나는, 순서대로 일어나지 않는)인 명령을 내리고 싶을때 사용한다.
예를 들어 a = func / b = func이라고 할때. a(b) 라는 명령이 있다고 하자. 그럼 a 함수안에 있는 내용이 실행되고 나서 b 함수가 실행된다. 정확히 말하면 a 함수가 실행되는 상태에서 독립적으로 b 함수가 실행되는 상태라고 할까? "우리가 전달해준 함수를 나중에 너가 불러와" 라고도 할까? 우선 코드를 보자

//
function print() {
  console.log("hello");
}

console.log("1");
setTimeout(print, 1000);
console.log("2");
// 1
// 2
// hello

//
todoForm.addEventListener("submit", handleFormSubmit);

//

setTimeout 함수는 함수인자와 시간인자를 받는다. 위의 코드는 "브라우저야 1초 지나고 나서 print 함수를 다시 불러줘(콜백)" 라고 말하는 것이다. 그럼 위의 순서대로 출력된다.

eventlistner 메소드도 마찬가지다. "submit을 했을때 인자로 넣은 handleFormSubmit 함수를 다시 불러와줘" 라고 말하는 것이다. 이런식으로 동기적으로 실행되는게 아니라 언제 그 함수가 실행될지 예측할 수 없는 상태이다.

예를들어서 다음과 같은 함수가 있다고 보자.

shoppingWeb().then(shoppingData).then(shoppingDataDisplay);

관리자가 원하는 것은, shoppingWeb에서 사용자가 쇼핑을 하고 물건을 클릭하면 그 클릭한 물건을 data로 저장한다음 관련된 물건을 web에 띄워서 사용자가 관련된 물건까지 사게하고 싶은거다. 이때 동기적으로 처리한다면 클릭하는 순간 data형태로 저장 -> 웹에 표시의 과정을 거칠것이다. 그럼 사용자는 매번 클릭할때마다 기다려야한다. 이때 비동기적 방법을 사용해야한다. promise를 하는거다.

따라서 일단 shoppingWeb에서 사용자가 하고싶은거 다하게 하고 data가 다 수집되어 저장되면 then을 통해 그제서야 display 하게 하는게 훨씬 효율적이다. 비유를 하자면 then은 shoppingWeb을 향해서 손을 뻗어서 data가 오기를 기다리고 있는거다.

또한, 콜백은 사용자에게 어떠한 처리방법을 위임하기도 한다. 그리고 이러한 콜백함수를 이용해서 AJAX(Asynchronous Javascript And Xml) 가 가능하기도하다. 예를 들어, 아래와 같은 순서대로 동작해야한다고 생각해보자.

1. 사용자가 댓글을 단다.

2. 댓글단 사용자에게 서버가 메일을 보낸다.

3. 댓글이 표시된다.

순서대로 일어나는것을 동기적으로 일어난다고 말한다. 만약 만명이 댓글을 달고 메일을 보내는데 1초가 걸린다고 하면 10000초가 걸린다.(동기적으로 처리한다고 할 경우). 그리고 3번이 실행된다. 그럼 댓글이 표시될때까지 3시간이나 기다려야한다. 그래서 2번을 예약하고 바로 3번으로 가도록한다. 그리고 2번을 서버가 backend에서 조용히 실행하게 한다.

댓글이 달리게 하고 따로 서버는 웹상에서 댓글러의 정보를 불러와 확인한후에 메일을 보내는 것이다. 이러한 경우 AJAX가 있기 때문에 우리는 웹상에서 정보를 확인하면서 다양한 기능을 선택적으로 사용할 수 있게 되는 것이다.

7. sync 콜백함수

그러나 동기적인 콜백함수도 있다. 순서대로 실행되고 실행되자마자 콜백함수를 호출하는 것이다

var array = [1, 30, 20, 400, 500, 2, 3, 5, 12, 33];
console.log(array.sort(sortFunc));

function sortFunc(a, b) {
  return a - b;
}

function myDisplayer(sum) {
  console.log("mydis" + sum);
}

function myCalculator(num1, num2, myCallback) {
  let sum = num1 + num2;
  myCallback(sum);
}

myCalculator(5, 5, myDisplayer);

// [1, 2, 3, 5, 12, 20, 30, 33, 400, 500]
// mydis10

sort 메소드 같은 경우 compare 함수를 인자로 받는다. 그리고 compare 함수에서 array의 원소를 하나하나 compare 함수에 대입한다. a - b의 값이 + 인지 - 인지 0 인지에 따라 배열을 달리한다. 그래서 compare 함수안에서 배열이 다 끝나면 sort 함수가 끝난다. sort 함수가 실행되는 도중에 따로 compare 함수가 실행된다. myCalculator 함수도 마찬가지다.

출처: 생활코딩(https://opentutorials.org/course/2136/11884)