CoreJavaScript (04) 콜백함수

이 포스트는 정재남 님의 저서 코어자바스크립트의 Chapter 4. 콜백함수에 기반합니다.
스스로 이해하고 기억하기 위한 기록이며, 책은 사서 읽읍시다!

Chapter 04. Callback Function

• Callback Function의 정의
  다른 코드의 인자로 넘겨주는 함수. 이 때 함수의 제어권도 함께 넘겨주기 때문에, 콜백 함수를 넘겨받은 함수는 해당 함수의 내부 로직에 의해 콜백 함수를 실행하게 됩니다.

🔎 제어권

호출 시점

var count = 0;
var callbackFunction = funtion(){
    console.log(count);
    if (++count > 4) clearInterval(timer);
}
var timer = setInterval(callbackFunction, 300);
 // setInterval에 전달된 두 개의 매개변수 : (function, delay)

setInterval 호출 시 300ms (두번째 매개변수) 마다 function (첫번째 매개변수) 가 실행됩니다.
timer가 callbackFunction의 제어권을 넘겨받아 함수 호출의 제어권을 가지는 것입니다.

인자

var arr = ["a", "b", "c"];
var newArr = arr.map((item, idx) => {return (item + idx)})
console.log(newArr)
// [ 'a0', 'b1', 'c2' ]

인자의 순서를 임의로 바꾸는 경우 전혀 다른 결과가 나옵니다.
(map method) 함수 호출의 주체는 인자의 순서에 대한 제어권도 가지고 있습니다.

🔎 콜백함수는 함수다

var obj = {
  multi: function(a, b){ console.log(this, a, b); } }
var newVals= [4, 5, 6];

/* method로 호출한 multi */
obj.multi(1,2) 
// { multi: [Function: multi] } 1 2

/* forEach의 callback function으로 호출한 multi */
newVals.forEach(obj.multi); 
// Window {...} 4 0
// Window {...} 5 1
// Window {...} 6 2

🔎 동기와 비동기

동기

asynchronous
현재 실행 중인 코드가 완료된 후에 다음 코드를 실행하는 방식

비동기

synchronous
현재 실행 중인 코드와 무관하게 즉시 다음 코드를 실행하는 방식

• setTimeout : 특정 시간이 지날 때까지 함수 실행을 보류
• addEventListener : 사용자의 개입으로 event가 발생할 때까지 함수 실행을 보류

비동기 제어

웹의 복잡도가 높아지면서 비동기적 코드의 비중이 예전보다 커졌고, 이에 따라 비동기적인 작업을 동기적으로 처리하는 장치가 마련되었습니다. (다음 세 가지)

• Promise
  new Promise(callback function, delay).then...
  Promise의 인자인 callback function은 바로 실행되지만, 내부에서 resolve or reject 함수를 호출하는 구문이 있는 경우, 해당 함수의 실행 전까지는 then 이후의 코드가 실행되지 않습니다. 따라서 비동기 작업이 완료되는 시점에 resole or reject 함수를 호출하면 동기적 표현이 가능합니다.

new Promise(function(resolve) {
  setTimeout(function() {
    var name = "espresso";
    console.log(name);
    resolve(name);
  }, 500)
}).then(function(preName) {
  return new Promise(function(resolve) {
    setTimeout(function() {
      var name = ", americano";
      console.log(name);
      resolve(name);
    }, 500)
  }).then...

• Generator
  function*(){...}
  Generator의 return값은 Iterator : .next method를 호출하면 Generator 내부에서 가장 먼저 등장하는 yield에서 실행을 멈추고, 다시 next method를 호출하면 그 다음 코드부터 실행됩니다. 비동기 작업이 완료되는 시점마다 next method를 호출하면 동기적 표현이 가능합니다.

var addCoffee = function(prevName, name) {
  setTimeout(function() {
    coffeeMaker.next(prevName ? preName + ',' + name : name);
  }, 500);
};
var coffeeGenerator = function*() {
  var espresso = yield addCoffee('','espresso');
  console.log(espresso);
  var americano = yield addCoffee(expresso, 'americano');
  console.log(americano);
  ...
};
var coffeMaker = coffeeGenerator();
  coffeeMaker.next();

• Async/await
  비동기 작업을 수행할 함수 앞에 async, 실제 비동기 작업이 필요한 시점마다 await를 표기하여 해당 내용을 Promise로 전환하고 resolve된 후에 다음 코드를 진행합니다.

var addCoffee = function(name) {
  return new Promise(function(resolve) {
    setTimeout(function() {
      resolve(name);
    }, 500);
  });
};
var coffeeMaker = async function() {
  var coffeeList = '';
  var _addCoffee = async function(name) {
  coffeeList += (coffeeList ? ',' : '') + await addCoffee(name);
};
  await _addCoffee('espresso');
  console.log(coffeeList);
  await _addCoffee('americano');
  console.log(coffeeList);
  ...
};
coffeeMaker();