[JavaScript] 콜백함수와 비동기 처리

Callbacks

콜백은 다른 함수에 인수로 전달되는 함수이다.
함수가 다른 함수를 호출할 수 있으며, 다른 함수가 완료된 후에 실행할 수 있다.

콜백을 사용하면 콜백과 함께 계산기 함수(myCalculator)를 호출하고
계산이 완료된 후 계산기 함수가 콜백을 실행하도록 할 수 있다.

function myDisplayer(some) {
  document.getElementById("demo").innerHTML = some;
}

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

myCalculator(5, 5, myDisplayer);

JavaScript Callbacks
Do a calculation and then display the result.

10

위의 예에서 `myDisplayer`는 함수의 이름이며 `myCalculator()` 인수로 전달된다.

함수의 인수로 전달할 때 괄호를 사용하지 않는다.
myCalculator(5, 5, myDisplayer);
myCalculator(5, 5, myDisplayer());

---

Asynchronous

나중에 끝낼게!
다른 함수와 병렬로 실행되는 함수를 비동기식이라고 한다.
콜백은 비동기 함수와 함께 가장 자주 사용된다.
대표적인 예는 JavaScript setTimeout() 이다.

setTimeout()

JavaScript 함수 setTimeout()를 사용할 때 시간 초과 시 실행할 콜백 함수를 지정할 수 있다.

setTimeout(myFunction, 3000);

function myFunction() {
  document.getElementById("demo").innerHTML = "I love You !!";
}

위의 예에서 myFuntion 는 콜백으로 사용되며 myFunctionsetTimeout() 인수로 전달된다. 3000은 milliseconds 로 myFunction() 3초 후에 호출된다.

함수를 인수로 전달할 때 괄호를 사용하지 않는다.
setTimeout(myFunction, 3000);
setTimeout(myFunction(), 3000);

setTimeout(function() { myFunction("I love You !!!"); }, 3000);

function myFunction(value) {
  document.getElementById("demo").innerHTML = value;
}

위의 예에서 function(){ myFunction("I love You !!!"); } 는 콜백으로 사용된다.

---

setInterval()

JavaScript 함수 setInterval()를 사용할 때 각 간격에 대해 실행할 콜백 함수를 지정할 수 있다.

setInterval(myFunction, 1000);

function myFunction() {
  let d = new Date();
  document.getElementById("demo").innerHTML=
  d.getHours() + ":" +
  d.getMinutes() + ":" +
  d.getSeconds();
}

위의 예에서 myFunction는 콜백으로 사용되며, myFunction setInterval()인수로 전달된다.
1000은 milliseconds로 1초 마다 myFunction()이 호출된다.

---

파일 로드

스크립트나 파일과 같은 외부 리소스를 로드하는 함수를 생성하면 완전히 로드되기 전에는 사용할 수 없다. 이럴 때 콜백을 사용하면 된다.
이 예에서는 HTML 파일(mycar.html)을 로드하고 파일이 완전히 로드된 후 HTML 파일을 웹 페이지에 표시한다.

function myDisplayer(some) {
  document.getElementById("demo").innerHTML = some;
}

function getFile(myCallback) {
  let req = new XMLHttpRequest();
  req.open('GET', "mycar.html");
  req.onload = function() {
    if (req.status == 200) {
      myCallback(this.responseText);
    } else {
      myCallback("Error: " + req.status);
    }
  }
  req.send();
}

getFile(myDisplayer);

위의 예에서 myDisplayer는 콜백으로 사용되며, myDisplayer getFile() 인수로 전달된다.

참고자료

JavaScript Callbacks
Asynchronous JavaScript